d3更新数据和更新图 [英] d3 update data and update graph
本文介绍了d3更新数据和更新图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在d3中有以下简单的行，但是没有问题，想知道如何传递data2并更新行以反映更改。
<！DOCTYPE html>
< html lang =en>
< head>
< title> D3折线图演示< / title>
< meta charset =utf-8/>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< link rel =stylesheettype =text / csshref =style.css>
< script src =jquery.min.jstype =text / javascriptcharset =utf-8>< / script&
< script src =d3.min.jstype =text / javascriptcharset =utf-8>< / script>
< body>
< button class =first lastonclick =transition（）>
更新
< / button>
< div id =chart>< / div>
< / body>
< script>
var data = [3，7，9，1，4，6，8，2，5];
var data2 = [3，7，9，1，4，6，8，2，15];
var width = 600;
var height = 400;
var max = d3.max（data）;
x = d3.scale.linear（）。domain（[0，data.length - 1]）。range（[0，width]）;
y = d3.scale.linear（）。domain（[0，max]）。range（[height，0]）;
vis = d3.select（'＃chart'）
.style（'margin'，'20px auto'）
.style（'width'，+ width +px）
.append（'svg：svg'）
.attr（'width'，width）
.attr（'height'，height）
.attr （'class'，'viz'）
.append（'svg：g'）;
vis.selectAll（'path.line'）
.data（[data]）
.enter（）
.append（svg：path）
.attr（d，d3.svg.line（）。x（function（d，i）{
return x（i）;
}）
.y （y））;
< / script>
< / html>
解决方案
我是D3的新手，发现，我主要是从火花示例在这里。
而不是使用此代码绘制行：
vis.selectAll（'path.line'）
.data（[data]）
.enter（）
.append（svg：path）
.attr（d，d3.svg.line （function（d，i）{return x（i）;}）。
分别生成行：
var line = d3.svg.line（）。x（function（d，i）{return x（i）;}）y（y）
然后将其应用到数据：
vis.selectAll（'path.line'）
.data（[data]）
.enter（）
.append（svg：path）
.attr d，line）;
然后，当您要更新您调用的数据时：
vis.selectAll（path）
.data（[data]）//设置新数据
.attr（d线）; //应用新数据值
sparklines示例还显示了如何为其设置动画： p>
I have the following simple line in d3 but haven't an issue trying to figure out how to pass it data2 and update the line to reflect the change.
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3 Line Chart Demo</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="d3.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<button class="first last" onclick="transition()">
Update
</button>
<div id="chart"></div>
</body>
<script>
var data = [3, 7, 9, 1, 4, 6, 8, 2, 5];
var data2 = [3, 7, 9, 1, 4, 6, 8, 2, 15];
var width = 600;
var height = 400;
var max = d3.max(data);
x = d3.scale.linear().domain([0, data.length - 1]).range([0, width]);
y = d3.scale.linear().domain([0, max]).range([height, 0]);
vis = d3.select('#chart')
.style('margin', '20px auto')
.style('width', "" + width + "px")
.append('svg:svg')
.attr('width', width)
.attr('height', height)
.attr('class', 'viz')
.append('svg:g');
vis.selectAll('path.line')
.data([data])
.enter()
.append("svg:path")
.attr("d", d3.svg.line().x(function(d, i) {
return x(i);
})
.y(y));
</script>
</html>
解决方案
I am new to D3 but this is what I have found and I mainly figured this out from the sparklines example here.
Instead of drawing the line with this code:
vis.selectAll('path.line')
.data([data])
.enter()
.append("svg:path")
.attr("d", d3.svg.line().x(function(d, i) {return x(i); }).y(y));
generate the line separately:
var line = d3.svg.line().x(function(d, i) { return x(i); }).y(y)
Then apply it to the data:
vis.selectAll('path.line')
.data([data])
.enter()
.append("svg:path")
.attr("d", line);
Then when you want to update the data you call:
vis.selectAll("path")
.data([data]) // set the new data
.attr("d", line); // apply the new data values
The sparklines example also shows you how to animate it :)
这篇关于d3更新数据和更新图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
