Question

根据其他用户的建议，我决定用v4重做我的地图。所以考虑到这一点，我已经开始使用一张简单的地图并在the arcs docs上阅读，但我该如何将其应用到地图上？

var arc = d3.arc();
arc({
   innerRadius: 0,
   outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

plnkr：http://plnkr.co/edit/ttXZdjmZDaqtTNvhb6Qz?p=preview

Answer 1

我在你上一期的问题中留下了你的评论问题，所以这里很快就会抓住你所追求的内容。初始地图绘制来自d3文档示例here。在绘制之后，我添加了一行，其中包含从here借来的自定义弧。然后，我使用attrTween和"stroke-dasharray"来设置生长线的动画，并在转换结束时使用另一个过渡来增加圆圈。

运行代码：

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<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;
  }
  
  .land {
    fill: #222;
  }
  
  .boundary {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5px;
  }
</style>
<svg width="960" height="960"></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/d3/d3-geo/master/test/data/world-50m.json", function(error, world) {
    if (error) throw error;

    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 coordinates = [
      projection([-74, 40]), // new york
      projection([-43, -22]) // rio 22.9068° S, 43.1729° W
    ];

    var line = svg.append("path")
      .datum(coordinates)
      .attr("d", function(c) {
        var d = {
          source: c[0],
          target: c[1]
        };
        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", "steelblue")
      .style("stroke-width", 5)
      .style("fill", "none")
      .transition()
      .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 = coordinates[1];
        svg.append('circle')
          .attr('cx', c[0])
          .attr('cy', c[1])
          .attr('r', 0)
          .style('fill', 'red')
          .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>

＆＃13;

Answer 2

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<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;
  }
  
  .land {
    fill: #222;
  }
  
  .boundary {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5px;
  }
</style>
<svg width="960" height="960"></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;

    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 coordinates = [
      projection([-74, 40]), // new york
      projection([37, 55]) // moscow
    ];

    var line = svg.append("path")
      .datum(coordinates)
      .attr("d", function(c) {
        var d = {
          source: c[0],
          target: c[1]
        };
        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", "steelblue")
      .style("stroke-width", 5)
      .style("fill", "none")
      .transition()
      .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 = coordinates[1];
        svg.append('circle')
          .attr('cx', c[0])
          .attr('cy', c[1])
          .attr('r', 0)
          .style('fill', 'red')
          .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>

＆＃13;

如何添加arc d3 v4 map

2 个答案: