Question

我试图显示两个数据集：一个具有较低的不透明度，另一个具有使用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。我究竟做错了什么？

Answer 1

您对第一个和第二个数据集使用相同的选择。因此，对于第二个数据集，您选择已存在的<circle>。相反，请使用其他选择，例如：

svg.selectAll("circle2")

Answer 2

您可以使用样式处理此问题。像：

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);

你将遇到麻烦的＆＃34; circle2＆＃34;如果你试图更新，因为它永远不会选择任何东西。

绘制两个数据集

2 个答案: