[英]Animation is not working for multiline chart D3 v4
我已经创建了一个折线图。 现在,我试图在其中添加动画。 折线图是多折线图。 当我尝试将动画放置在两行中时,代码不起作用,并且当我注释第二行的动画代码时,则适用于第一行。
这两行的动画一起不起作用。
下面是codepen的链路- 链路在codepen链路“第二行代码(动画)的评论”
码:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="lineChartGph" class="lineChartGph"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
initLineChart();
function initLineChart(){
// set the dimensions and margins of the graph
var margin = {top: 20, right: 40, bottom: 30, left: 50},
width = 450 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%Y");
var data =[{"date":"2014","Profit":"34.13","Sales":"24.12"},{"date":"2015","Profit":"63.98","Sales":"45.56"},{"date":"2016","Profit":"67.00","Sales":"54.00"},
{"date":"2017","Profit":"45.00","Sales":"22.17"},{"date":"2018","Profit":"18.32","Sales":"24.13"}];
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the 1st line
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.Sales); })
.curve(d3.curveMonotoneX);
// define the 2nd line
var valueline2 = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.Profit); })
.curve(d3.curveMonotoneX);
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#lineChartGph").append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Get the data
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.Sales = +d.Sales;
d.Profit = +d.Profit;
});
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function (t) { return i(t); };
}
function transition(path) {
path.transition()
.duration(2000)
.attrTween("stroke-dasharray", tweenDash);
}
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) {
return Math.max(d.Sales, d.Profit); })]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "#00357F")
.style("fill", "none")
.style("stroke-width", "3px")
.attr("d", valueline);
svg.select("path")
.datum(data)
.attr("d", valueline)
.call(transition);
/* svg.select("path")
.datum(data)
.attr("d", valueline2)
.call(transition);*/
// Add the valueline2 path.
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "#006600")
.style("fill", "none")
.style("stroke-width", "3px")
.attr("d", valueline2);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear.every(1)));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.style("fill", "cornflowerblue")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.Sales); });
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.style("fill", "darkseagreen")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.Profit); });
}
</script>
</body>
</html>
当你做...
svg.select("path")
... svg
选择将选择它在文档中看到的第一个<path>
元素。 那显然不是您想要的。
最简单的选择是为这些路径设置不同的ID(无论如何,ID都是唯一的)并按ID选择。 但是,最惯用的选择是将选择传递给transition
:
transition(d3.selectAll("path"))
可以重构如下:
function transition(selection) {
selection.each(function() {
d3.select(this).transition()
.duration(2000)
.attrTween("stroke-dasharray", tweenDash);
})
};
这是更新的Codepen: https ://codepen.io/anon/pen/ERrqmp ? editors = 0010
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.