javascript - 使用组元素而不是点时数据丢失

Question

我使用这个代码:

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 条条目丢失了。

提前致谢!

Answer 1

问题是页面上已有 g 元素。这些通过 svg.selectAll("g") 进行选择，然后与数据进行匹配。因此，输入选择并不包含您期望出现的所有元素。

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

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