javascript - 在 d3 中动态更新适用于圆形，但不适用于外部 SVG

Question

假设我想使用 d3 动态更新页面上圆圈的位置和数量。我可以使用 .data()、.enter()、.exit() 模式来做到这一点。这是一个工作示例。 http://jsfiddle.net/csaid/MFBye/6/

function updatePositions(data) {

  var circles = svg.selectAll("circle").data(data);

  circles.enter().append("circle");

  circles.exit().remove();

  circles.attr("r", 6)
      .attr("cx", 50)
      .attr("cy", function (d) {
      return 20 * d
  });

}

但是，当我尝试使用外部 SVG 而不是圆圈执行相同的操作时，第一次更新后的许多新数据点不会出现在页面上。例子: http://jsfiddle.net/csaid/bmdQz/8/

function updatePositions(data) {

    var gs = svg.selectAll("g")
        .data(data);

    gs.enter().append("g");

    gs.exit().remove();

    gs.attr("transform", function (d, i) {
        return "translate(50," + d * 20 + ")";
    })

        .each(function (d, i) {
        var car = this.appendChild(importedNode.cloneNode(true));
        d3.select(car).select("path")
    });
}

我怀疑这与用于附加外部 SVG 对象的 .each() 有关，但我不知道如何解决这个问题。另外，“cx”和“cy”属性是特定于圆的，所以我无法想象它们如何用于外部 SVG。

提前致谢!

Answer 1

您的代码有两个问题。第一个问题，也是您看不到所有数据点的原因，是您的外部 SVG 包含您正在选择的 g 元素。这意味着，在您首次附加元素后，任何后续的 .selectAll("g") 选择都将包含来自这些外部 SVG 的元素。这反过来意味着您传递给 .data() 的数据与这些数据匹配，因此您的选择不包含您期望的内容。通过向您显式添加的 g 元素添加一个类并进行相应的选择，可以轻松解决此问题。

第二个问题是您正在执行附加外部 SVG 作为更新选择一部分的代码。这意味着这些元素会被添加多次——您不会注意到(因为它们重叠)，但也不理想。通过将克隆节点的调用移至 .enter() 选择，可以轻松解决此问题。

完整的jsfiddle here 。至于您关于 cx 和 cy 的问题，您实际上并不需要它们。您可以使用 transform 属性设置附加的任何元素的位置，就像您在代码中所做的那样。