我试图根据下拉框选择更新/更改矩形的数据.我尝试了各种各样的东西,我不太了解D3调度功能.感谢有人可以更新此代码,以便我可以看到它在实践中是如何工作的.我有3个带数值的数据集,我只是想根据用户在菜单栏中选择的内容来更新矩形尺寸.
非常感谢,
Menu Bar
spanndemic.. 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); });
这是一个工作小提琴,演示了使用select更改数据(可能需要根据您的需要进行调整):
http://jsfiddle.net/spanndemic/5JRMt/
您的脚本的主要问题是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); });
这是一个工作小提琴,演示了使用select更改数据(可能需要根据您的需要进行调整):
http://jsfiddle.net/spanndemic/5JRMt/