代码之家  ›  专栏  ›  技术社区  ›  thatOneGuy

数据中的第一个元素被重新提交而不是更新

  •  1
  • thatOneGuy  · 技术社区  · 6 年前

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

    按更新按钮查看问题。

    这个代码笔的问题是,它只重绘了第一个元素(Myriel)。

    我认为合并是将现有数据与新数据合并,唯一应该进入enter的数据应该是新数据。出口是为了删除冗余数据?

    由于此图既有圆又有文本,是否应该对包含这些圆的“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 });
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Gerardo Furtado    6 年前

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

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

    forceNetwork.nodeEnter
        .append("circle")
    

    这必然会复制圆和线。

    相反,合并所选内容 将圆和线附加到输入选择中,还可以在 tick 功能。

    https://codepen.io/anon/pen/GXYozm?editors=1010