Javascript d3更新图形中的路径和圆

我想更新图表，但它不起作用。我想更新直线和圆。我试图补充

.exit().remove()

更新圆和

  g.selectAll("path").attr("d", line);

更新路径

但是，它不起作用

使用exit（）.remove（）更新外部组可以正常工作。（本例中的复选框）

仅更新路径和圆不起作用。（本例中的更新按钮）

我不想删除图形中的所有行并再次追加，因为我想在数据更改时添加转换

这是一把JS小提琴： 这是我的密码：

var data = [
  [{
    point: {
      x: 10,
      y: 10
    }
  }, {
    point: {
      x: 100,
      y: 30
    }
  }],
  [{
      point: {
        x: 30,
        y: 100
      }
    }, {
      point: {
        x: 230,
        y: 30
      }
    },
    {
      point: {
        x: 50,
        y: 200
      }
    },
    {
      point: {
        x: 50,
        y: 300
      }
    },
  ]
];

var svg = d3.select("svg");

var line = d3.line()
  .x((d) => d.point.x)
  .y((d) => d.point.y);

function updateGraph() {
  console.log(data)
  var allGroup = svg.selectAll(".pathGroup").data(data);
  var g = allGroup.enter()
    .append("g")
    .attr("class", "pathGroup")
  allGroup.exit().remove()

  g.append("path")
    .attr("class", "line")
    .attr("stroke", "red")
    .attr("stroke-width", "1px")
    .attr("d", line);

  g.selectAll("path").attr("d", line);

  g.selectAll(null)
    .data(d => d)
    .enter()
    .append("circle")
    .attr("r", 4)
    .attr("fill", "teal")
    .attr("cx", d => d.point.x)
    .attr("cy", d => d.point.y)
    .exit().remove()

}
updateGraph()

document.getElementById('update').onclick = function(e) {

  data = [
    [{
      point: {
        x: 10,
        y: 10
      }
    }, {
      point: {
        x: 100,
        y: 30
      }
    }],
    [{
        point: {
          x: 30,
          y: 100
        }
      }, {
        point: {
          x: 230,
          y: 30
        }
      },
      {
        point: {
          x: 50,
          y: 300
        }
      },
    ]
  ];
  updateGraph()
}


$('#cb1').click(function() {
  if ($(this).is(':checked')) {
    data = [
      [{
        point: {
          x: 10,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }],
      [{
          point: {
            x: 30,
            y: 100
          }
        }, {
          point: {
            x: 230,
            y: 30
          }
        },
        {
          point: {
            x: 50,
            y: 200
          }
        },
        {
          point: {
            x: 50,
            y: 300
          }
        },
      ]
    ];

  } else {
    data = [
      [{
        point: {
          x: 10,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    ];
  }
  updateGraph()
});

问题

allGroup.exit（）。因此，退出选择为空

变量
data
包含行，而不是点。页面加载时定义的一行和
update
listener中的一行包含两行，只是其中的点数不同

您可以通过将
console.log（data.length）
放在函数
updateGraph
中来检查这一点

解决方案1
更改数据结构。您可以为每一行分配一个
id
属性，并使用
.data
的
键
功能。比照

更新的JSFIDLE实现解决方案1:

此解决方案需要较少的更改

解决方案2
如果您无法控制数据结构，您可以在
更新
选项中转换线条图，而不是在
退出
选项中转换线条图。
id不明白为什么我必须使用p3作为id？当我想更新时。所以每次我更新我都需要一个新的id？如果我返回undefined，为什么它会工作呢。与此js FIDLE Yes类似，ID必须不同，以便删除的行进入
exit
选择。如果使用相同的Id，则该行进入
update
选项。参考文档链接和在线教程它之所以有效，是因为d3选择的逻辑让这种情况发生，出于某种原因。定义实际的不同键更安全。您可以根据项目在数组中的位置生成它们。