Question

在我正在进行的项目中，我在exit上链接了一系列D3过渡。基本上，当从数据集中删除元素时，它们将被聚焦在＆＃39;从某种意义上说，他们的数据被突出显示，并且更多的SVG元素被附加到与要退出的元素相关的位置。

当转换发生在同一页面上时，一切看起来都很棒 - 没有什么破坏，只有一件事情同时出现，一切都很好。

然而，当我离开标签一段时间（这样我返回时会退出多个项目），会发生什么事情已被清除除了 {{ 1}} span元素中的元素，这些元素在我处于不同的选项卡/焦点之外时已经退出。它们保留在页面上，直到要退出的下一个元素经历所有转换（可能是因为foreignObject）。

以下是我如何解决问题：

selectAll('foreignObject.textBox')

fadeOut功能如下所示：

svg.exit()
  .each(function(d, i) {

    ...

    textBox = container.selectAll('foreignObject.textBox')
      .data([root]).enter()
      .append('foreignObject')
      .attr({
        class: 'textBox',
        x: root.getX() - 30 * (flippedX ? -1 : 1) + 45,
        y: root.getY() - 30 * (flippedY ? -1 : 1) - 25,
        width: 0,
        height: 55
      })
      .html('<div class="graph-msg"><span class="graph-msg-text">' + message.body + '</span>');

    textBox.transition()
      .delay(TR_MOVE_TO_CENTER)
      .duration(TR_EXPAND)
      .attr({
        width: 180
      })
      .each('end', function(node, i) {
        textBox.transition()
          .delay(TR_SHOW)
          .each('end', function(node, i) {
            fadeOut(textBox, TR_FADE);
          });
      });

有关如何解决此问题的任何想法？我需要使用function fadeOut(d3Elem, millis, onEnd) { d3Elem.transition() .duration(millis) .style({ opacity: 0 }) .each('end', onEnd || function(d, i) { d3Elem.remove(); }); }因为我需要文本环绕。这只是使用foreignObject的一部分吗？ MDN表示foreignObject的内容是由其他用户代理绘制的 - 这可能与问题有关吗？

使用带有D3转换的foreignObject

0 个答案: