笔划-dashoffset和dasharray动画不起作用 [英] Stroke-dashoffset and dasharray animations not working

问题描述

我正在尝试在D3中设置路径线的动画.我可以使用其他过渡效果，例如淡入淡出效果，但是在研究了如何过渡路径之后，似乎最好的选择是通过修改它来处理笔划dasharray

I'm trying to animate a path line in D3. I can get other transitions to work such as a fade in effect, but after researching how to transition paths, it seems the best option is to play with the stroke dasharray by modifying it

var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Test Drive for data ",
      "time": "2018-04-03T01:48:51Z",
      "coordTimes": []
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [10, 10, 10],
        [30, 40, 10],
        [50, 20, 10],
        [70, 100, 10],
        [90, 20, 10],
        [110, 120, 10],
        [130, 100, 10],
        [150, 80, 10]
      ]
    }
  }]
}

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var lineFunction = d3.line()
  .x(function(d) {
    return d[0]
  })
  .y(function(d) {
    return d[1]
  })
  .curve(d3.curveBasis);

var totalLength = d3.line(data).length;

var tripLine = svg.append("path")
  .datum(data.features[0].geometry.coordinates)
  .attr("id", "pathLine")
  .style("stroke-dasharray", 0)
  .attr("d", lineFunction)
  .style("stroke", "#ddd")
  .transition()
  .duration(2000)
  .style("stroke", "red")
  .style("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-width", 4)
  .attr("fill", "none");

<script src="https://d3js.org/d3.v5.min.js"></script>

问题在于，由于对语法进行了更新，使得无法获得路径的总长度，D3使得使用先前的示例极为困难.

The problem is that D3 has made using prior examples extremely difficult due to updates made to the syntax that makes getting the total length of the path impossible.

推荐答案

此处存在一个基本错误:d3.line(data).length与d3.line().length相同，将返回1.

There is a basic mistake here: d3.line(data).length, which by the way is the same of d3.line().length, will return 1.

您想要的方法是 getTotalLength ，必须在 SVG元素上调用，而不是在D3选择上调用，甚至在行生成器上调用.

The method you want is getTotalLength, which has to be called on the SVG element, not on the D3 selection and even less on the line generator.

因此:

var totalLength = tripLine.node().getTotalLength();

这是更新的代码:

var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Test Drive for data ",
      "time": "2018-04-03T01:48:51Z",
      "coordTimes": []
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [10, 10, 10],
        [30, 40, 10],
        [50, 20, 10],
        [70, 100, 10],
        [90, 20, 10],
        [110, 120, 10],
        [130, 100, 10],
        [150, 80, 10]
      ]
    }
  }]
}

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var lineFunction = d3.line()
  .x(function(d) {
    return d[0]
  })
  .y(function(d) {
    return d[1]
  })
  .curve(d3.curveBasis);

var tripLine = svg.append("path")
  .datum(data.features[0].geometry.coordinates)
  .attr("id", "pathLine")
  .style("stroke-dasharray", 0)
  .attr("d", lineFunction)
  .style("stroke", "#ddd")
  .attr("fill", "none");

var totalLength = tripLine.node().getTotalLength();

tripLine.transition()
  .duration(2000)
  .style("stroke", "red")
  .style("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-width", 4);

<script src="https://d3js.org/d3.v5.min.js"></script>

这篇关于笔划-dashoffset和dasharray动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！