我正在尝试根据下拉框选择更新/更改矩形数据。我尝试了各种各样的东西,我不太了解D3调度功能。感谢有人可以更新此代码,以便我可以看到它在实践中是如何工作的。我有3个带数值的数据集,我只是想根据用户在菜单栏中选择的内容来更新矩形尺寸。
非常感谢,<!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>
答案 0 :(得分:12)
您的脚本的主要问题是d3代码只执行一次。如果有多个数据集,则每次更新数据时都必须调用d3模式(绑定,添加,更新,删除)。
以下是您将要实现目标的大致概述:
// 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 both new and 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);
});
这是一个工作小提琴,用于显示数据随选择而变化(可能需要根据您的需要进行调整):