Question

在d3 v4图表上，我绘制了多个坐标的弧线。一切都很好。现在我想从json请求中绘制线条。将绘制任何新线，同时保留现有线。据我了解，每一行都需要自己的过渡......

如果我理解正确，坐标的迭代从

开始

line.attr("d", function(c) {...}

迭代每组坐标，然后在内部对它们进行分组，使它们同时作为一个事件被“触发”。对此的任何解释都很感激。

Plunker：https://plnkr.co/edit/Ax4Tby47lFlryzVWCHi2?p=preview

千电子伏

Answer 1

我不确定我是否正确阅读了您的问题，但听起来您希望您的动画一个接一个地开始。这可以通过.delay：

来完成

  .attr("stroke-dasharray", "0, 1000") //<-- hide the line
  .transition()
  .delay(function(d, i) { 
    return 5000 * i; //<-- i is the index of the line, so stagger the animation start by index * duration
  })
  .duration(5000)
  .attrTween("stroke-dasharray", function() {
    var len = this.getTotalLength();
    return function(t) {
      return (d3.interpolateString("0," + len, len + ",0"))(t)
    };
  })

完整代码：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <style>

.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 3px;
}
  
.fill{
	fill: #fff;
}


  .graticule {
    fill: none;
    stroke: #777;
    stroke-width: 0.5px;
    stroke-opacity: 0.5;
  }
 
/* the color of land in countries */ 
.land {
	fill: #222;
}

/* the color of borders */
.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: 0.5px;
}
</style>


<svg width="800" height="600"></svg>


<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

  var projection = d3.geoMercator()
    .scale((width - 3) / (2 * Math.PI))
    .translate([width / 2, height / 2]);

  var path = d3.geoPath()
    .projection(projection);

  var graticule = d3.geoGraticule();

  svg.append("defs").append("path")
    .datum({
      type: "Sphere"
    })
    .attr("id", "sphere")
    .attr("d", path);

  svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

  svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

  svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) {
	if (error) throw error;
	
	d3.json("https://jsonblob.com/api/5806b733e4b0bcac9f817223", function(coord){ 

    svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

    svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) {
        return a !== b;
      }))
      .attr("class", "boundary")
      .attr("d", path);

    var line = svg.selectAll(".paths")
      .data(coord)
      .enter()
      .append("path");
      
      line.attr("d", function(c) {
        console.log(c);
        var d = {
          source: projection(c.source),
          target: projection(c.destination)
        };
        var dx = d.target[0] - d.source[0],
          dy = d.target[1] - d.source[1],
          dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + d.source[0] + "," + d.source[1] + "A" + dr + "," + dr +
          " 0 0,1 " + d.target[0] + "," + d.target[1];
      })
      .style("stroke", "red") // color of the arc line
      .style("stroke-width", 5)
      .style("fill", "none")
      .attr("stroke-dasharray", "0, 1000")
      .transition()
      .delay(function(d, i) { 
        return 5000 * i;
      })
      .duration(5000)
      .attrTween("stroke-dasharray", function() {
        var len = this.getTotalLength();
        return function(t) {
          return (d3.interpolateString("0," + len, len + ",0"))(t)
        };
      })
      .on('end', function(d) {
        var c = projection(d.destination);
        svg.append('circle')
          .attr('cx', c[0])
          .attr('cy', c[1])
          .attr('r', 0)
          .style('fill', 'white') // color of the cirle
          .style('fill-opacity', '0.5')
          .transition()
          .duration(2000)
          .attr('r', 50)
          .on('end', function(d) {
            d3.select(this)
              .transition()
              .duration(2000)
              .attr('r', 10);
          });
      });
	});
  });
</script>
  </body>

</html>

＆＃13;

如何添加单独的行来映射

1 个答案: