分享程序员开发的那些事...
更新时间：2022-12-19 23:32:42
我为你创建了一个小提琴这里。这是一个简单的采取你有一些改变，特别是分离输入，更新和退出选择。这将帮助您开始了解D3中的更新过程。
//输入选择
bars
。 enter（）。append（div）;
//更新选择
bars
.style（width，function（d）{return scale（d）+％;}）
。 text（function（d）{return d;}）;
//退出选择
bars
.exit（）。remove（）;
I’ve started with the "Let’s make a bar chart I" example here: http://bost.ocks.org/mike/bar/
And I’m having a hard time figuring out how to make the very simple bar chart made with HTML5 elements update with new data. Here is my code:
<!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://***.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>
The question is what do I put into update() to cause the bars to draw with the new data? I tried d3.select("#work_queues_chart").selectAll("div").data(data) with the new data, but I’m unclear on what needs to happen next (or whether that was the right move).
I have create a fiddle for you here. It is a simple take on what you had with a few changes, particularly separating the enter, update and exit selections. This should help you start understanding the update process in 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();