如何用新数据更新d3.js条形图 [英] How to update d3.js bar chart with new data
问题描述
我开始使用让我们制作条形图这个例子： http://bost.ocks.org / mike / bar /
我很难想象如何使用HTML5元素更新非常简单的条形图。这是我的代码：
<！DOCTYPE html>
< html>
< head>
< style>
#work_queues_chart div {
font-size：0.5em;
font-family：sans-serif;
颜色：白色
background-color：steelblue;
text-align：right;
padding：0.5em;
margin：0.2em;
}
< / style>
< script src =http://d3js.org/d3.v3.min.jscharset =utf-8/>
< script type =text / javascript>
function init（）{
var data = [0，0，0，0，0，0]
/ * scale是将数据中的值标准化为范围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 （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 * /
}
窗口。 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）与新的数据，但我不清楚什么需要解决方案我为你创建了一个小提琴这里。这是一个简单的采取你有一些改变，特别是分离输入，更新和退出选择。这将帮助您开始了解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://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>
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();
这篇关于如何用新数据更新d3.js条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
