Javascript d3多行更新路径和转换路径不适用于嵌套数据

我想用一个过渡来更新图中的圆和路径。但是，它不起作用

我对D3不是很有经验。如何使我的代码更好？改变数据结构不是问题。我希望使用exit（）remove（）和enter（）将数据绑定到图形，而不删除整个图形，并在每次更新时添加数据。我不知道如何对嵌套数据使用enter（）exit（）和remove（）。一次用于整个组，另一方更新圆和路径。ID应该是固定的

我有一个来自d3noob的单行示例

---

这是一个

---

编辑以将数据联接更改为适当

我认为这个问题与变量

数据

有关。因此，我添加了

data

作为函数的参数，并为不同的数据集指定了单独的名称。当我指定不同的数据名称时，我可以更新图表：

var first_data = [{
    id: 'p1',
    points: [{
      point: {
        x: 100,
        y: 10
      }
    }, {
      point: {
        x: 100,
        y: 30
      }
    }]
  },
  {
    id: 'p2',
    points: [{
        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(data) {
  console.log('dataset contains', data.length, 'item(s)')
  var allGroup = svg.selectAll(".pathGroup")
    .data(data, function(d) { return d; });

  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")
    .transition()
    .duration(500)
    .attr("d", function(d) {
        console.log("update path");
      return line(d.points)
    });

  g.selectAll("path")
  .transition()
  .duration(500)
  .attr("d", function(d) {
    return line(d.points)
  });

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

}
updateGraph(first_data)

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

  var update_data = [{
      id: 'p1',
      points: [{
        point: {
          x: 20,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    },
    {
      id: 'p2',
      points: [{
          point: {
            x: 30,
            y: 100
          }
        }, {
          point: {
            x: 230,
            y: 30
          }
        },
        {
          point: {
            x: 50,
            y: 300
          }
        },
      ]
    }
  ];

  updateGraph(update_data)
}


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

  } else {
    var click_data = [{
      id: 'p1',
      points: [{
        point: {
          x: 10,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    }];
  }
  updateGraph(click_data)
});

---

Fiddle:

您的

数据存在范围问题。我只想在单击“更新”时使用新数据更新图表，但这不起作用。我的问题是，当你点击更新按钮时，要更新这些点。再看一眼。
var first_data = [{
    id: 'p1',
    points: [{
      point: {
        x: 100,
        y: 10
      }
    }, {
      point: {
        x: 100,
        y: 30
      }
    }]
  },
  {
    id: 'p2',
    points: [{
        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(data) {
  console.log('dataset contains', data.length, 'item(s)')
  var allGroup = svg.selectAll(".pathGroup")
    .data(data, function(d) { return d; });

  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")
    .transition()
    .duration(500)
    .attr("d", function(d) {
        console.log("update path");
      return line(d.points)
    });

  g.selectAll("path")
  .transition()
  .duration(500)
  .attr("d", function(d) {
    return line(d.points)
  });

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

}
updateGraph(first_data)

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

  var update_data = [{
      id: 'p1',
      points: [{
        point: {
          x: 20,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    },
    {
      id: 'p2',
      points: [{
          point: {
            x: 30,
            y: 100
          }
        }, {
          point: {
            x: 230,
            y: 30
          }
        },
        {
          point: {
            x: 50,
            y: 300
          }
        },
      ]
    }
  ];

  updateGraph(update_data)
}


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

  } else {
    var click_data = [{
      id: 'p1',
      points: [{
        point: {
          x: 10,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    }];
  }
  updateGraph(click_data)
});