D3仅在元素不存在时附加元素

Question

我有D3的问题,如果我第二次追加一个元素,我将在父节点中获得重复的元素.

  node.enter().insert("svg:g")
      .attr("class", 'test')
      .attr("width", '63px')
      .attr("height", '68px')
      .call(force.drag);

  node.append("svg:circle")
      .attr("class", "bg-circle")
      .attr("r", "30px");

例如我会得到:

<g class="test">
   <circle class="bg-circle" />
   <circle class="bg-circle" />
</g>

但我想要:

<g class="test">
   <circle class="bg-circle" />
</g>

即使我调用我的函数第二次设置节点.

Answer 1

我有一个函数可以初始化或更新绘图，并且为了防止在允许转换到元素的同时制作重复的样板，我最终执行了以下操作：

const grid = d3.select('.grid').node()
  ? d3.select('.grid')
  : g.append('g')
      .attr('class', 'grid');

Answer 2

我猜你想用 d3 来绘制一些 UI。我用过类似的东西：

    function appendOnce(selection, s) {
        var l = s.split("."); // l[0] tag, l[0] dot separated classes

        var g = selection.selectAll(s)
            .data([0])

        g.enter().append(l[0])
            .attr("class", l.slice(1).join(" "))

        return g;
    }

    // and then use
    var clild = appendOnce(parent, "text.y-caption")
        .attr(...)
        .style(...);