Javascript 使用组元素而不是点时缺少数据

我使用以下代码：

svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", function(d) { return domainOnlyScale(parseFloat(d.Size)+0.01); } )
    .attr("cx", function(d) {return x(d.x+(Math.random() * 0.25) - 0.125); })
    .attr("cy", function(d) { return y(d.y+(Math.random() * 0.25) - 0.125); })
    .style("fill", function(d) { return color(d.color); })
    .style("stroke-width", "1px")
    .style("stroke", function(d) { return strokecolor(d.color); });

一切正常。所有数据点都会显示出来。现在我将这部分代码更改为：

console.log(data); // Shows all data points!
var groupings = svg.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d){return "translate("+(x(d.x+(Math.random() * 0.25) - 0.125))+","+y(d.y+(Math.random() * 0.25) - 0.125)+")"}); //used console.log here)

groupings.append("circle")
    .attr("class", "dot")
    .attr("r", function(d) { return domainOnlyScale(parseFloat(d.size)+0.01); } )
    .style("fill", function(d) { return color(d.color); })
    .style("stroke-width", "1px")
    .style("stroke", function(d) { return strokecolor(d.color); });

groupings.append("text")
        .attr("class", "bubbletext")
        .attr("dx", function(d){ return -4 })
        .attr("dy", function(d){ return +5 })
        .text( function(d) { return d.category.substring(0,1); } );

我在创建分组的转换函数中使用了另一个console.log，数据已经在那里过滤了。从几次尝试来看，似乎前15个条目丢失了

---

提前谢谢

问题是页面上已经有了g元素。这些是通过svg.selectAllg选择的，然后与数据匹配。因此，enter选择并不包含您期望存在的所有元素

解决方法很简单-将一个类分配给您在此处使用的g元素，以便能够将它们与其他元素区分开来，并相应地选择：

svg.selectAll("g.dot")
   .data(data)
   .enter()
   .append("g")
   .attr("class", "dot");

---

页面上可能已经有其他g元素了。将一个类添加到用于此操作的g元素中，例如svg.selectAllg.dot.datadata.enter.appendg.attrclass，dot.make sense and worked-非常感谢Lars。你能输入这个作为解决方案，这样我就可以选择它了吗？谢谢