【发布时间】：2020-12-23 23:22:24
【问题描述】：
我希望在 d3 折线图中绘制多条线，并使用动画过渡每条线。这是一个工作示例，但一次显示 1 行。
https://www.d3-graph-gallery.com/graph/line_change_data.html
我正在尝试扩展它以同时显示多行。然后当点击 Dataset 2 按钮时，它会显示一组新的线条，并转换每一个线条。我的尝试是here
// Create 2 datasets
var data1 = [
[{
ser1: 0.3,
ser2: 4
},
{
ser1: 2,
ser2: 16
},
{
ser1: 3,
ser2: 8
}
],
[{
ser1: 1,
ser2: 7
},
{
ser1: 4,
ser2: 1
},
{
ser1: 6,
ser2: 8
}
]
];
var data2 = [
[{
ser1: 4,
ser2: 7
},
{
ser1: 2,
ser2: 5
},
{
ser1: 2,
ser2: 3
}
],
[{
ser1: 1,
ser2: 10
},
{
ser1: 5,
ser2: 8
},
{
ser1: 7,
ser2: 3
}
]
];
// set the dimensions and margins of the graph
var margin = {
top: 10,
right: 30,
bottom: 30,
left: 50
},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Initialise a X axis:
var x = d3.scaleLinear().range([0, width]);
var xAxis = d3.axisBottom().scale(x);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "myXaxis")
// Initialize an Y axis
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft().scale(y);
svg.append("g")
.attr("class", "myYaxis")
// Create a function that takes a dataset as input and update the plot:
function update(data) {
// Create the X axis:
x.domain([0, d3.max(data, function(d) {
return d3.max(d, function(d) {
return d.ser1;
});
})]);
svg.selectAll(".myXaxis").transition()
.duration(3000)
.call(xAxis);
// create the Y axis
y.domain([0, d3.max(data, function(d) {
return d3.max(d, function(d) {
return d.ser2;
});
})]);
svg.selectAll(".myYaxis")
.transition()
.duration(3000)
.call(yAxis);
data.forEach(function(data, i) {
// Create a update selection: bind to the new data
var u = svg.selectAll(`.lineTest${i}`)
.data([data], function(d) {
return d.ser1
});
// Update the line
u
.enter()
.append("path")
.attr("class", `.lineTest${i}`)
.merge(u)
.transition()
.duration(3000)
.attr("d", d3.line()
.x(function(d) {
return x(d.ser1);
})
.y(function(d) {
return y(d.ser2);
}))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2.5);
});
}
// At the beginning, I run the update function on the first dataset:
update(data1);<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Add 2 buttons -->
<button onclick="update(data1)">Dataset 1</button>
<button onclick="update(data2)">Dataset 2</button>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>但问题是，当我单击数据集 2 按钮时，它会绘制新线，旧线仍然显示，并且它们之间没有过渡。
有人知道这里出了什么问题吗？
谢谢
【问题讨论】：
-
我认为这是你想要的工作：jsfiddle.net/kqjcobah。不过有几件事：数据连接将负责递归，因此不需要
forEach。设置班级时，不要输入句点 - 仅在选择课程时输入句点。我也将 line 函数移到了一个变量中。希望有帮助！
标签： javascript d3.js