Question

我遇到D3问题，如果我第二次附加一个Element，我将在父节点中获得重复的元素。

  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

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

在我的html中。索引我有两个按钮，它们调用不同的数据源以制作相同类型的图表，因此，每次单击其中一个按钮时，都会得到重复的图形（函数1调用_des的div数据，函数2调用_ic div的数据）< / p>

<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 
}

希望这对任何人都有效，因为我无法用其他方法解决。

Answer 2

我只有一个函数来初始化或更新绘图，并且为了防止在允许过渡到元素的同时制作重复的样板，我最终做了以下事情：

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

Answer 3

我猜您想使用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(...);

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

3 个答案: