D3如何根据下拉框选择更改数据集 [英] D3 How to change dataset based on drop down box selection
问题描述
我试图根据下拉框选择更新/更改矩形的数据。我已经尝试过各种事情，我不太了解D3调度功能够好。感谢，如果有人可以更新这段代码，使我可以看到它是如何工作在实践中。我有3个数据集的值，我只是试图更新矩形维度基于用户在菜单栏中选择。
I am trying to update/change the data for rectangles based on drop down box selection. I have tried various things and I don't really understand the D3 dispatch function well enough. Grateful if someone could update this code so that I can see how it works in practice. I have 3 datasets with values, and I am simply trying to update rectangle dimensions based on what the user selects in the menu bar.
非常感谢，
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<script type="text/javascript" src="d3/d3.js">
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<select id = "opts">
<option value="ds1">data1</option>
<option value="ds2">data2</option>
<option value="ds3">data3</option>
<!-- and so on... -->
</select>
<script type="text/javascript">
var w = 100,
h = 100
;
var color = d3.scale.ordinal()
.range(["#1459D9", "#daa520"]);
var ds1 = [[{x:0,y:12}],[{x:0,y:45}]];
var ds2 = [[{x:0,y:72}],[{x:0,y:28}]];
var ds3 = [[{x:0,y:82}],[{x:0,y:18}]];
var canvas = d3.select("body")
.append("svg")
.attr("width",100)
.attr("height",100)
;
var appending = canvas.selectAll("body")
.data(ds2) ///trying to make this selection dynamic based on menubar selection
.enter()
.append("g")
.style("fill", function(d,i){return color(i);})
;
appending.selectAll("shape")
.data(function (d) {return d;})
.enter()
.append("rect")
.attr("x",10)
.attr("y",10)
.attr("width",function (d) {return d.y;})
.attr("height",19)
;
</script>
</body>
</html>
推荐答案
脚本的主要问题是d3代码只执行一次。当您有多个数据集时，必须在每次更新数据时调用d3模式（绑定，添加，更新，删除）。
The main issue with your script is that the d3 code only executes once. When you have multiple data sets, the d3 pattern (bind, add, update, remove) must be called each time the data is updated.
什么会完成你想要的：
// config, add svg
var canvas = d3.select('body')
.append('svg')
.attr('width',100)
.attr('height',100)
.appeng('g');
// function that wraps around the d3 pattern (bind, add, update, remove)
function updateLegend(newData) {
// bind data
var appending = canvas.selectAll('rect')
.data(newData);
// add new elements
appending.enter().append('rect');
// update existing elements
appending.transition()
.duration(0)
.attr("width",function (d) {return d.y; });
// remove old elements
appending.exit().remove();
}
// generate initial legend
updateLegend(initialValues);
// handle on click event
d3.select('#opts')
.on('change', function() {
var newData = eval(d3.select(this).property('value'));
updateLegend(newData);
});
这里是一个工作的小提琴演示数据改变与选择（可能需要调整为您的需求）：
Here is a working fiddle that demonstrates the data changing with a select (probably needs to be tweaked for your needs):
http://jsfiddle.net/ spanndemic / 5JRMt /
这篇关于D3如何根据下拉框选择更改数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
