个人中心
gpt4 book ai didi

javascript - 如何根据键盘输入使圆圈消失？

转载 作者：行者123 更新时间：2023-11-30 15:28:25 25 4
gpt4 key购买 nike

基于这个例子:http://bl.ocks.org/d3noob/10633704我想在我的键盘上输入一个数字(一个数字)并借助 array.slice() 使圆圈消失。不幸的是，它并没有很好地工作。在我的代码中，我根据数组 days 的值创建了一些圆圈。使用 HTML 部分，我可以创建一个按钮，我可以在其中输入数字。对于最后一部分 days.slice(nValue) 我希望输入数字与 slice() 函数括号内的数字相同，所以数组 days 越来越短，自动让基于数组值的圆圈消失。但不幸的是，我在这段代码中犯了一个错误。有人可能会如此友善并提供帮助吗？我正在使用 D3 来解决这个问题。谢谢

<!DOCTYPE html>
<meta charset="utf-8">
<title>Input (number) test</title>

<p>
  <label for="nValue" 
         style="display: inline-block; width: 120px; text-align: right">
         angle = <span id="nValue-value"></span>
  </label>


  <input type="number" min="0" max="360" step="4" value="0" id="nValue">
</p>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 600;
var height = 300;

var svg = d3.select("body")
      .append("svg")
      .attr("width", width)    
      .attr("height", height); 



  var days = [7, 12, 20, 31, 40, 50];
  console.log(days);




  var circle = svg.selectAll("circle")
            .data(days)
            .enter().append("circle")
            .attr("cy", 60)
            .attr("cx", function(d, i) { return i * 100 + 40; })
            .attr("r", function(d) { return Math.sqrt(d); });



  d3.select("#nValue").on("input", function() {
  update(+this.value);
});


// Initial update value 
update(0);




function update(nValue) {

days.slice(nValue);
}

最佳答案

我花了一段时间才明白你在这里的目的，我的理解可能还有点偏差。

问题

据我所知，您正在修改一组数据(在本例中使用选择菜单)，但修改后的数组似乎并未修改您的可视化。本质上，随着“数组天数越来越短……让基于数组值 [s] 的圆圈消失。”

更新可视化

要更新可视化，您需要将新数据绑定(bind)到您的选择。在此之后，您可以删除可视化中不需要的元素、添加新元素(与此问题无关)或修改现有元素。单独更改数据数组不会更新可视化。要让可视化利用新信息，您需要将该数据绑定(bind)到选择:

circle.data(data);

然后你可以删除旧的项目:

circle.exit().remove();

然后您可以修改旧项目的属性:

circle.attr('cx',function(d,i) {...

您的更新功能至少需要更新数据并删除不需要的元素。

改变数组

在下面的代码片段中，我根据数组中的数据附加了一个选择菜单和带有 d3 的圆圈。选择菜单中的项目将删除一个圆圈:

var data = [10,20,30,40,50,60,70,80,90,100];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value) });
  
var start = select.append('option')
  .html("select: ");
  
var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d) { return d; });


  
//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);
  
var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d,i) { return i * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d,i) { return color[i]; });
  
  
// Update everything:
function update(i) {
  data.splice(i,1); // remove that element.
  
  // Update and remove option from the select menu:
  options.data(data).exit().remove();
  
  // Remove that circle:
  circles.data(data).exit().remove(); 
  
  circles.attr('cx',function(d,i) { return i * 30 + 50; })
    .attr('fill',function(d,i) { return color[i]; });
  
  // reset the select menu:
  start.property('selected','selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

这里有个问题，每次只去掉最后一个圆圈和菜单项。为什么？想象一个四元素数组，如果你删除了第二项，d3 不知道你删除了第二项，你可能修改了元素二和三并删除了元素四。

由于您的所有项都附加了它们的增量(它们在数组中的位置)，并且这不考虑删除其他项时产生的空洞，因此您需要稍微改变一下方法。

解决方案

您可以在数据中使用 id 属性，而不是依赖于数组中项目的增量(因为每次从数组中删除另一个元素之前的元素时，这都会发生变化)。

这需要稍微重组您的数据。像这样的东西:

var data = [ {id:1,value:1},{id2....

由于 id 属性不会改变，因此这是一个更好的属性来设置属性。看看下面的片段:

var data = [{id:0,value:10},{id:1,value:20},{id:2,value:23},{id:3,value:40},{id:4,value:50},{id:5,value:60},{id:6,value:70},{id:7,value:77},{id:8,value:86},{id:9,value:90}];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value); } ); // add an event listener for changes

// append a default value:
var start = select.append('option')
  .html("Select:");
  
var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d) { return d.value; });
  
  
//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);
  
var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d) { return d.id * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d) { return color[d.id]; });
  
  
// Update everything:
function update(i) {
  data.splice(i,1); // remove the element selected
  
  // Update and remove option from the select menu:
  options.data(data).exit().remove();
  
  // Remove that circle:
  circles.data(data).exit().remove(); 
  
  // update the options (make sure each option has the correct attributes
  options.attr('value',function(d,i) { return i; })
  .html(function(d) { return d.value; })
  
  // Make sure circles are in the right place and have the right color:
  circles.attr('cx',function(d) { return d.id * 30 + 50; })
    .attr('fill',function(d) { return color[d.id]; });
    
  // reset the default value so the change will work on all entries:
  start.property('selected', 'selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

关于javascript - 如何根据键盘输入使圆圈消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42613736/

25 4 0
文章推荐： c# - 如何找到 "RaisePropertyChanged"调用的所有处理程序？
文章推荐： javascript - 随机从 5 个对象之一获取数据
文章推荐： javascript - jQuery + Greasmonkey : mouseover() is not a function
文章推荐： javascript - Web Audio API - 获取正确的频率
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com