d3 在第一次運行時沒有 append 圓圈

Question

我正在使用嵌套數據集和以下代碼在 d3 v5 中繪制圓圈：

const scatterGroup = svg.selectAll(".scatterGroup").data(data);

scatterGroup.exit().remove();

scatterGroup
  .enter()
  .append("g")
  .attr("class", "scatterGroup")
  .attr("fill", (d, i) => color[i])
  .attr("stroke", (d, i) => color[i])
  .append("g")
  .attr("class", "scatterPoints");

const scatterPoints = scatterGroup
  .selectAll(".scatterPoints")
  .data((d) => d);

scatterPoints
  .enter()
  .append("circle")
  .attr("class", "scatterPoints")
  .attr("cx", (d, i) => xScale(d.x))
  .attr("cy", (d, i) => yScale(d.y))
  .attr("r", 5);

scatterPoints.exit().remove();

const scatterUpdate = scatterGroup
  .transition()
  .duration(500)
  .attr("fill", (d, i) => color[i])
  .attr("stroke", (d, i) => color[i]);

scatterPoints
  .transition()
  .duration(500)
  .attr("cx", (d, i) => xScale(d.x))
  .attr("cy", (d, i) => yScale(d.y));

在提供數據的第一次運行中沒有任何反應。 控制在第一次加載時沒有到達 append 圓。 第二次加載數據時，d3 會附加圓圈。 誰能讓我知道如何在首次提供數據時讓它們出現以及為什么會這樣？

Answer 1

發生這種情況是因為數據是嵌套的，因此您需要.merge() scatterGroup 或在創建scatterPoints之前重新選擇它。 否則， scatterGroup仍然為空，而scatterGroup.enter()保存所有點。

我還從您的代碼中刪除了.append(g).attr('class', 'scatterPoints') ，因為它使用g而不是circle ，並且不需要在那里

 const svg = d3.select('svg'); const color = ['red', 'blue']; const data = [ [{ x: 10, y: 10 }, { x: 40, y: 100 }], [{ x: 25, y: 50 }] ]; const newData = [ [{ x: 10, y: 20 }, { x: 50, y: 100 }], [{ x: 25, y: 40 }] ]; function draw(data) { const scatterGroup = svg.selectAll(".scatterGroup").data(data); scatterGroup.exit().remove(); const scatterGroupNew = scatterGroup.enter().append("g").attr("class", "scatterGroup").attr("fill", (d, i) => color[i]).attr("stroke", (d, i) => color[i]); // Equivalent: //const scatterPoints = svg.selectAll(".scatterGroup") //.selectAll(".scatterPoint") //.data((d) => d); const scatterPoints = scatterGroup.merge(scatterGroupNew).selectAll(".scatterPoint").data((d) => d); scatterPoints.exit().remove(); const scatterPointsNew = scatterPoints.enter().append("circle").attr("class", "scatterPoint").attr("r", 5); scatterPoints.merge(scatterPointsNew).attr("cx", (d, i) => dx).attr("cy", (d, i) => dy); } draw(data); setTimeout(() => draw(newData), 1000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg> </svg>