Wil*_*ega 12 charts dynamic d3.js
我在这里开始使用"让我们制作一个条形图I"示例:http://bost.ocks.org/mike/bar/
而且我很难弄清楚如何使用HTML5元素制作的非常简单的条形图更新新数据.这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
#work_queues_chart div {
font-size: 0.5em;
font-family: sans-serif;
color: white;
background-color: steelblue;
text-align: right;
padding: 0.5em;
margin: 0.2em;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" />
<script type="text/javascript">
function init() {
var data = [0, 0, 0, 0, 0, 0];
/* scale is a function that normalizes a value in data into the range 0-98 */
var scale = d3.scale.linear()
.domain([0, 200])
.range([0, 98]);
var bars = d3.select("#work_queues_chart")
.selectAll("div")
.data(data)
.enter().append("div");
bars.style("width", function(d) { return scale(d) + "%"; })
bars.text(function(d) { return d; });
}
function update() {
var data = [4, 8, 15, 16, 23, 42];
/* http://stackoverflow.com/questions/14958825/dynamically-update-chart-data-in-d3 */
}
window.onload = init;
</script>
</head>
<body>
<div id="work_queues_chart" />
<button onclick="update()">Update</button>
</body>
</html>
问题是我将什么放入update()以使条形图与新数据一起绘制？我尝试d3.select("#work_queues_chart").selectAll("div").data(data)了新的数据,但我不清楚接下来会发生什么(或者这是否是正确的举措).
Fer*_*des 19
我在这里为你创造了一个小提琴.通过一些更改,您可以轻松了解所拥有的内容,尤其是分隔输入,更新和退出选择.这应该可以帮助您开始了解D3中的更新过程.
// enter selection
bars
.enter().append("div");
// update selection
bars
.style("width", function (d) {return scale(d) + "%";})
.text(function (d) {return d;});
// exit selection
bars
.exit().remove();
接受的答案已在 d3 版本 4 发布之前得到回答，但如果您使用 d3v4，则必须以另一种方式进行更新，因为（摘录自更新日志）：
selection.append不再将输入节点合并到更新选择中；用于selection.merge在数据连接后组合输入和更新。
// enter and update selection
bars
.enter()
.append("div")
.merge(bars) // <== !!!
.style("width", function (d) {return scale(d) + "%";})
.text(function (d) {return d;});
// exit selection
bars
.exit().remove();
下面隐藏代码片段中的工作示例：
// enter and update selection
bars
.enter()
.append("div")
.merge(bars) // <== !!!
.style("width", function (d) {return scale(d) + "%";})
.text(function (d) {return d;});
// exit selection
bars
.exit().remove();
function draw(data) {
var scale = d3.scaleLinear()
.domain([0, 50])
.range([0, 100]);
var bars = d3.select("#work_queues_chart")
.selectAll("div")
.attr("id","work_queues_chart")
.data(data);
// enter and update selection
bars
.enter().append("div")
.merge(bars)
.style("width", function (d) {return scale(d) + "%";})
.text(function (d) {return d;});
// exit selection
bars
.exit().remove();
};
function update() {
var data = [4, 8, 15, 16, 23, 42];
draw(data);
};
var data = [10, 10, 10, 10, 10, 10];
window.onload = draw(data);
d3.select('#update')
.on("click",update);#work_queues_chart div {
font-size: 0.5em;
font-family: sans-serif;
color: white;
background-color: steelblue;
text-align: right;
padding: 0.5em;
margin: 0.2em;
}| 归档时间： |
|
| 查看次数： |
20675 次 |
| 最近记录： |