gpt4 book ai didi

javascript - d3更新数据和更新图

转载 作者:IT王子 更新时间:2023-10-29 03:13:37 25 4
gpt4 key购买 nike

我在 d3 中有以下简单的行,但在尝试弄清楚如何将 data2 传递给它并更新行以反射(reflect)更改时没有问题。

<!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>

最佳答案

我是 D3 的新手,但这是我发现的,我主要是从迷你图示例 here 中发现的.

而不是用这段代码画线:

vis.selectAll('path.line')
.data([data])
.enter()
.append("svg:path")
.attr("d", d3.svg.line().x(function(d, i) {return x(i); }).y(y));

单独生成一行:

 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]) // set the new data
.attr("d", line); // apply the new data values

迷你图示例还向您展示了如何对其进行动画处理:)

关于javascript - d3更新数据和更新图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8538651/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com