javascript - d3js : adding same type of elements with different data

Question

//add circles with price data
svgContainer.selectAll("circle")
  .data(priceData)
  .enter()
  .append("svg:circle")
  .attr("r", 6)
  .style("fill", "none")
  .style("stroke", "none")
  .attr("cx", function(d, i) {
    return x(convertDate(dates[i]));
  })
  .attr("cy", function(d) { return y1(d); })

//add circles with difficulty data
svgContainer.selectAll("circle")
  .data(difficultyData)
  .enter()
  .append("svg:circle")
  .attr("r", 6)
  .style("fill", "none")
  .style("stroke", "none")
  .attr("cx", function(d, i) {
    return x(convertDate(dates[i]));
  })
  .attr("cy", function(d) { return y2(d); })

在上半部分，沿着图表中的相关线添加了带有价格数据的圆圈。现在我想对下半部分做同样的事情，将具有不同数据的圆圈添加到不同的行。然而，第一个圆圈的数据被第二个圆圈的数据覆盖，第二个圆圈永远不会被绘制。

我想我对这里发生的事情有直觉，但有人能解释一下到底做了什么以及如何解决问题吗？

可能的引用:

"The key function also determines the enter and exit selections: the new data for which there is no corresponding key in the old data become the enter selection, and the old data for which there is no corresponding key in the new data become the exit selection. The remaining data become the default update selection."

Answer 1

首先，了解selectAll()、data()、enter() 从这个伟大的post 中做了什么.

问题在于，由于 circle 元素在我们到达下半部分时已经存在，新提供的数据只是简单地覆盖了圆圈，而不是创建新的圆圈。为了防止这种情况发生，需要在后半部分的data()函数中指定一个关键函数。然后，第一批圈子不会被覆盖。

//add circles with price data
svgContainer.selectAll("circle")
  .data(priceData)
  .enter()
  .append("svg:circle")
  .attr("r", 6)
  .style("fill", "none")
  .style("stroke", "none")
  .attr("cx", function(d, i) {
    return x(convertDate(dates[i]));
  })
  .attr("cy", function(d) { return y1(d); })

//add circles with difficulty data
svgContainer.selectAll("circle")
  .data(difficultyData, function(d) { return d; }) // SPECIFY KEY FUNCTION
  .enter()
  .append("svg:circle")
  .attr("r", 6)
  .style("fill", "none")
  .style("stroke", "none")
  .attr("cx", function(d, i) {
    return x(convertDate(dates[i]));
  })
  .attr("cy", function(d) { return y2(d); })