13

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

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

4

3 回答 3

3

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

const grid = d3.select('.grid').node()
  ? d3.select('.grid')
  : g.append('g')
      .attr('class', 'grid');
于 2020-11-29T02:34:59.343 回答
-1

我猜你想使用 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(...);
于 2019-01-31T09:48:27.227 回答
-1

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

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

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

于 2020-05-11T17:34:43.817 回答