时间戳

首页 > 解决方案 > 数据中的第一个元素被重新渲染而不是更新

javascript - 数据中的第一个元素被重新渲染而不是更新

问题描述

这是类似于我的代码中发生的事情：https ://codepen.io/anon/pen/zJmvXa?editors=1010

按更新按钮查看问题。

这个codePen的问题是它唯一的重绘第一个元素（Myriel）。

我认为它必须围绕进入、退出或合并，但我不完全掌握发生了什么。

我认为合并是将现有数据与新数据合并，唯一应该进入输入的数据应该是新数据。退出是为了删除冗余数据？

由于该图既有圆圈又有文字，是否应该在包含这些的“g”元素上进行合并？

也许这与数据功能有关：

 .data(dataset1.nodes, function(d, i) {
      return d;
    });

如果我将其更改为使用 d.id，它会重新渲染所有内容。我认为这是由于数据具有 id 属性。这应该怎么做？

  // Apply the general update pattern to the nodes.
  forceNetwork.node = d3
    .select("#nodesContainer")
    .selectAll("g.network-node")
    .data(dataset1.nodes, function(d, i) {
      return d 
    });

  forceNetwork.node.exit().remove();

  forceNetwork.nodeEnter = forceNetwork.node
    .enter()
    .append("g")
    .attr("id", function(d, i) {
      return "network-g-node-" + d.id;
    })
    .attr("class", function(d, i) {
      return "network-node";
    })
    .call(
      d3
        .drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
    ).merge(forceNetwork.node);

  forceNetwork.nodeEnter
    .append("circle")
    .attr("id", function(d) {
      return d.id;
    })
    .attr("class", "networkviewer-node")
    .attr("fill", "red")
    .attr("r", 20);

  // Append images
  forceNetwork.nodeEnter
   .append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.id });

标签： javascriptd3.js

解决方案

这里的问题是您正在合并更新并输入选择...

forceNetwork.nodeEnter = forceNetwork.node
    .enter()
    .merge(forceNetwork.node);

...然后，附加圆圈（和线条）：

forceNetwork.nodeEnter
    .append("circle")

这必然会重复圆圈和线条。

取而代之的是，在将圆圈和线条附加到输入选择之后合并选择，并更改tick函数中的选择。

这是重构的代码：https ://codepen.io/anon/pen/GXYozm?editors=1010

推荐阅读