如何根据键盘输入使圆圈消失？ [英] How to make the circles disappear based on keyboard input?
问题描述
基于此示例： http://bl.ocks.org/d3noob/10633704我希望在我的键盘上输入一个数字（并在 array.slice（）的帮助下使圆圈消失。不幸的是，它运作不佳。在我的代码中，我根据数组天的值创建了一些圆圈。使用HTML部分，我可以创建一个按钮，我可以在其中输入数字。使用最后一部分 days.slice（nValue）我希望输入的数字与 slice（）括号内的数字相同函数，所以数组天越来越短，并自动让基于数组值的圆消失。但不幸的是，我在这段代码中犯了一个错误。有人可能会这么善良和帮助吗？我正在使用D3来解决这个问题。
谢谢
based on this example: http://bl.ocks.org/d3noob/10633704 i wish to make an input on my keyboard (a number) and make the circles disappear with the help of array.slice(). Unfortunally it did not worked well. In my code, i created some circles based on the values of the array days. With the HTML part i am able to create a button, where i can make a number input. With the last part days.slice(nValue) i want that the input number is the same like the number inside the brackets of the slice() function, so the array days is getting shorter and automatically let circles based on the value of the array disappear. But unfortunally there is a mistake i made in this code. Can someone maybe be so kind and help? I am using D3 to solve this problem.
Thanks
<!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);
}
推荐答案
我花了一段时间才到看看你在这之后的情况，我可能仍然有点理解。
It took me a while to see what you're after here, and I might still be off a bit in my understanding.
正如我所看到的那样，您正在修改数据数组（在这种情况下使用选择菜单），但修改后的数组似乎不会修改您的可视化。基本上，随着数组天数越来越短......让基于数组值[s]的圆圈消失。
As I see understand it, you are modifying an array of data (with a select menu in this case), but the modified array does not appear to modify your visualization. Essentially, as "the array days is getting shorter ... let circles based on the value[s] of the array disappear."
要更新可视化，您需要将新数据绑定到您的选择。在此之后，您可以删除可视化中不需要的元素，添加新元素（与此问题无关）或修改现有元素。单独更改数据数组不会更新可视化。要使可视化使用新信息，您需要将该数据绑定到选择：
To update the visualization you need to bind the new data to your selection. After this you can remove unneeded elements in the visualization, add new ones (not relevant to this question), or modify existing elements. Changing the data array by itself will not update the visualization. To have the visualization utilize the new information you need to bind that data to the selection:
circle.data(data);
然后你可以删除旧项目：
Then you can remove the old items:
circle.exit().remove();
然后你可以修改旧物品的属性：
Then you can modify properties of the old items:
circle.attr('cx',function(d,i) {...
您的更新功能至少需要更新数据并删除不需要的元素。
Your update function needs to at least update the data and remove unneeded elements.
在下面的代码片段中，我根据数组中的数据附加了一个选择菜单和带有d3的圆圈。选择菜单中的项目将删除一个圆圈：
In the following snippet I append both a select menu and the circles with d3 based on the data in the array. Selecting an item in the menu will remove a circle:
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不知道你删除了第二个项目，你可能已经修改了元素二和三并删除了元素四。
There is a problem here, only the last circle and menu item is removed each time. Why? Imagine a four element array, if you remove the second item, d3 does not know that you removed the second item, you might have modified elements two and three and removed element four.
由于你的所有物品都附加了它们的增量（它们在阵列中的位置），这并不考虑在删除其他物品时创建的洞，你需要改变一点方法。
Since all your items are appended with their increment (which position they are in the array), and this doesn't account for holes that were created when other items were removed, you need to change the approach a little.
而不是依赖于增量数组中的项（因为每次从数组中删除另一个元素之前的元素时都会更改），您可以在数据中使用id属性。
Instead of relying on the increment of an item in the array (as this will change every time an element that is before another element is removed from the array), you could use an id property in your data.
这需要对数据进行一些重组。类似于：
This would require restructuring you data a little. Something like:
var data = [ {id:1,value:1},{id2....
由于id属性不会改变，因此这为设置属性提供了更好的属性。请看下面的代码：
As the id property won't change, this makes a better property to set attributes. Take a look at the following snippet:
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>
这篇关于如何根据键盘输入使圆圈消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
