D3 仅在元素不存在时追加元素答案

【问题标题】：D3 append element only if element not existD3 仅在元素不存在时追加元素
【发布时间】：2013-06-18 13:00:36
【问题描述】：

我的 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>

即使我再次调用我的函数来设置节点。

【问题讨论】：

您应该只为enter() 选择附加元素——这将解决您的问题。
感谢 Lars 解决了我的问题！！
能否将您的解决方案代码发布到您的问题末尾或作为您自己问题的答案？
看看这个答案stackoverflow.com/a/14511399/145574

标签： javascript svg d3.js

【解决方案1】：

我有一个单独的函数来初始化或更新绘图，为了防止重复样板同时允许转换到元素，我最终做了以下事情：

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

【讨论】：

【解决方案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(...);

【讨论】：

【解决方案3】：

我遇到了同样的问题，预览答案对我没有帮助，所以我通过这样做解决了它：

在我的 html 中。 index 我有两个按钮，它们调用不同的数据源来制作相同类型的图表，所以每次我点击其中一个按钮时，我都会得到重复的图表（函数 1 调用 _des 的 div 数据，函数 2 调用 _ic div 的数据）

<div>
  <h3>Graficas</h3>
  <label>
    <input id="des" type="checkbox" class="radio"  name="fooby[1][]" checked onchange='load_des(this)'/>data 1 </label>
  <label>
    <input id="ic" type="checkbox" class="radio"  name="fooby[1][]" onchange='load_ic(this)'/>data 2</label>
</div>

<div class="container">
    <div id="donut_des"></div>
    <div id="bars_des" ></div>
    <div id="donut_ic"></div>
    <div id="bars_ic" ></div>
</div>

所以我只是在我的 main.js 文件中为每个函数添加了这个：

function load_des(obj) {
  if($(obj).is(":checked")){

  document.getElementById('donut_ic').innerHTML = "";
  document.getElementById('bars_ic').innerHTML = "";

// do everything else normally 
}

function load_ic(obj) {
  if($(obj).is(":checked")){

  document.getElementById('donut_des').innerHTML = "";
  document.getElementById('bars_des').innerHTML = "";

// do everything else normally 
}

希望这对任何人都有效，因为我无法以任何其他方式解决这个问题。

【讨论】：