D3 - 动态更新圈包数据

时间:2015-11-17 23:14:58

标签: javascript d3.js svg

我的问题与此类似: D3 update circle-pack data new nodes overlap existing nodes

我试图在新数据进入时动态更新circle pack。这是我的初始化代码:

if (childrenToAdd.length > 0) {
  for (var cIdx = 0; cIdx < childrenToAdd.length; cIdx++) {
    map.data.children.push(d3CreateCirclePackChildData(zone.children[childrenToAdd[cIdx]]));
  }
  svg.datum(map.data).selectAll('.node')
    .data(pack.nodes, function(d) {return d.id;})
    .enter().append('g')
    .attr('class', function(d) { return d.children ? 'node' : 'leaf'; });
}

if (childrenToRemove.length > 0) {
  for (var rIndex = 0; rIndex < childrenToRemove.length; rIndex++) {
    map.data.children.splice(childrenToRemove[rIndex], 1);
  }
  svg.datum(map.data).selectAll('.node')
    .data(pack.nodes, function(d) {return d.id;})
    .exit().remove();
}

这是我每秒调用的更新代码:

if (childrenToRemove.length > 0) {
  for (var rIndex = 0; rIndex < childrenToRemove.length; rIndex++) {
    map.data.children.splice(childrenToRemove[rIndex], 1);
  }
  map.pack = d3.layout.pack()
    .size([packSize, packSize])
    .value(function(d) { return d.size; });
  svg.datum(map.data).selectAll('.node')
    .data(pack.nodes, function(d) {return d.id;})
    .exit().remove();
}

症状:添加孩子的代码不会产生任何有用的东西。移除子项的代码部分工作 - 圆圈从圆包中移除 - 因此外圈收缩并且子圆圈咬合在一起,但是要移除的圆仍然停留在svg中并且被绘制在另一个子项后面圆。

red circle didn't get deleted, but went to background

如果我添加修改最后一部分,如下:

<Foo>
<ds:Signature Id="REC">
  <ds:SignedInfo>
    <ds:CanonicalizationMethod />
    <ds:SignatureMethod />
    <ds:Reference>
       <ds:Reference URI="">
         <ds:Transforms>
          <ds:Transform Algorithm="http://www.w3.org/TR/1999/REC-xpath-19991116">
           <ds:XPath>not(ancestor-or-self::ds:Signature)</ds:XPath>
          </ds:Transform>
         </ds:Transforms>
       <ds:DigestMethod>
       <ds:DigestValue>
    </ds:Reference>
    <ds:Reference /> etc.
  </ds:SignedInfo>
  <ds:SignatureValue />
  <ds:KeyInfo />
  <ds:Object />
</ds:Signature>
</Foo>

已删除的圈子现在发送到前面。

enter image description here

0 个答案:

没有答案