[英]D3 How to change dataset based on drop down box selection
我試圖根據下拉框選擇更新/更改矩形的數據。 我嘗試了各種各樣的東西,我不太了解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>
您的腳本的主要問題是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更改數據(可能需要根據您的需要進行調整):
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.