Question

我正在尝试创建一个项目，在该项目中，每个国家/地区之间的印度，巴基斯坦和中国的边界在单击按钮时就可以看到。这是项目的当前状态，主要来自我稍后将参考的另一个代码-http://jsfiddle.net/cormundo/6fL23dwq/2/

我不知道d3或javascript，所以这对我来说都是学习过程。我的补间改编自https://bl.ocks.org/mbostock/3916621，因为杂乱程度较小。以下评论说明了我想做什么->

<svg width="960" height="500">

在这里我在背景中添加了一个静态SVG，尽管去往补间元素附近的一条路径消失了，但似乎效果很好。

</path>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var d0 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100",
    d1 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100c100,0 0,100 100,100";

在这里，我想了解如何添加更多内容-我想添加4条可以在它们之间进行补间的行。因此，而不是

d0 <-> d1

我想要

d0 <-> d1 or d2
and simultaneously
d3<-> d4 or d5

这是bostocks示例的其余代码，我没有更改。

d3.select("path")
    .attr("d", d0)
  .transition()
    .duration(2000)
    .on("start", function repeat() {
      d3.active(this)
          .attrTween("d", pathTween(d1, 4))
        .transition()
          .attrTween("d", pathTween(d0, 4))
        .transition()
          .on("start", repeat);
    });

function pathTween(d1, precision) {
  return function() {
    var path0 = this,
        path1 = path0.cloneNode(),
        n0 = path0.getTotalLength(),
        n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

    // Uniform sampling of distance based on specified precision.
    var distances = [0], i = 0, dt = precision / Math.max(n0, n1);
    while ((i += dt) < 1) distances.push(i);
    distances.push(1);

    // Compute point-interpolators at each distance.
    var points = distances.map(function(t) {
      var p0 = path0.getPointAtLength(t * n0),
          p1 = path1.getPointAtLength(t * n1);
      return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
    });

    return function(t) {
      return t < 1 ? "M" + points.map(function(p) { return p(t); }).join("L") : d1;
    };
  };
}

</script>

我的问题是-如何设置它，以便同一补间功能可在多个svg上使用？我想拥有它，以便可以在三种不同的可能状态之间插入两条线。我现在就决定理解如何处理两个状态，而不会打扰后台的另一个SVG。在bl.ocks.org示例中，从本质上讲，我想了解如何向该SVG添加一条额外的行，该行也可以在两个不同的行配置之间进行补间。

我认为我的问题来自对SVG的工作原理以及d3与DOM的关系缺乏了解。我也想知道是否可以设置它，使其在不同的 class 之间补间，而不是仅在SVG中的不同“ d”元素之间补间。如果您对此问题有任何想法，请告诉我，谢谢！

如何使用D3补间多个路径/ SVG

0 个答案: