D3.js 绘制两个数据集

我试图用D3.js显示两个数据集：一个具有较低的不透明度，另一个具有正常点。我试过这个：

svg.selectAll("*").remove();

if (olddset!=dset) {
svg.selectAll("circle") .data(datasets[olddset]) .enter() .append("circle")
    .attr('cx',function(a){ return xscales[whichscale][xval](a[xval]); })
    .attr('cy',function(a){ return yscales[whichscale][yval](a[yval]); })
    .attr('r',1)
    .style("opacity", 0.2)
    ;
}

svg.selectAll("circle") .data(datasets[dset]) .enter() .append("circle")
    .attr('cx',function(a){ return xscales[whichscale][xval](a[xval]); })
    .attr('cy',function(a){ return yscales[whichscale][yval](a[yval]); })
    .attr('r',3)
    .style("opacity", 1)
    ;

---

然而，这并不是我想要的。我希望

olddset

是小点，新的数据集（

dset

）是

r=3

和

opacity=1

。我做错了什么

您对第一个和第二个数据集使用相同的选择。因此，对于第二个数据集，您选择的是已经存在的

s。相反，请使用不同的选择，例如：

svg.selectAll("circle2")

---

你可以用样式来处理这个问题。比如：

svg.selectAll("circle.oldset").data(datasets[olddset]).enter().append("circle")
    .attr('cx',function(a){ return xscales[whichscale][xval](a[xval]); })
    .attr('cy',function(a){ return yscales[whichscale][yval](a[yval]); })
    .attr('r',1)
    .classed("oldset", true); // where the oldset class in yr styles has the opacity defined

svg.selectAll("circle.dset") .data(datasets[dset]) .enter() .append("circle")
    .attr('cx',function(a){ return xscales[whichscale][xval](a[xval]); })
    .attr('cy',function(a){ return yscales[whichscale][yval](a[yval]); })
    .attr('r',3)
    .classed("dset", true);

---

如果尝试更新，您将遇到“circle2”技巧的问题，因为它不会选择任何内容。

尝试使用

svg。对于第二个数据集，请选择All（“circle2”）

。谢谢。这就解决了问题。我学到了一些新东西。