Question

我已经创建了一个折线图。现在，我试图在其中添加动画。折线图是多折线图。当我尝试将动画放在两行中时，代码不起作用，并且当我注释第二行的动画代码时，则适用于第一行。

两行动画都无法正常工作。

这是codepen的链接-link 在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>

Answer 1

当你做...

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

动画不适用于多折线图D3 v4

1 个答案: