时间戳

首页 > 解决方案 > 从图表中删除重叠的点

d3.js - 从图表中删除重叠的点

问题描述

工作jsfiddle：

http://jsfiddle.net/kick_out/njerfb49/

我有一个工作散点图，当您从下拉列表中选择一个字母时，名称中带有所选字母的点会改变颜色和大小；但我似乎无法弄清楚如何删除旧点（或完全写在旧点上），这样它们就不会与选定的点重叠。

var changeSelectedColor = function(selPop){
    d3.selectAll('circle')
        .transition().duration(1500)
        .attr("cx",d => xScale(xData(d)))
        .attr("cy",d => yScale(yData(d)))
        .style("fill",'black')
        .attr("r",3.5)
    d3.selectAll('circle.selected')
        .transition().duration(1500)
        .attr("cx",d => xScale(xData(d)))
        .attr("cy",d => yScale(yData(d)))
        .style('fill','orange')
        .attr("r",10)
        .style('opacity',100)
}

我已经尝试了 exit().remove() 的几次迭代，但无济于事。请注意，当下拉项更改时，我将所选点上的类属性更改为“已选择”。相关的重绘功能是第 87 行（是的，我可能错误地重绘了；我愿意接受不同的 enter().append() 或 .join() 建议）。

标签： d3.js

解决方案

我认为您要进行的主要更改是selection在更新之前过滤，而不是过滤data：

dots.filter(d => d.Types.includes(sel)).attr("class",'selected')

我还认为添加一个"not-selected"类（在覆盖上面选择的类之前）将更容易更新两类点：

dots.attr('class', 'not-selected')

最后，我添加了确保重置非选定点的不透明度。在这里拉小提琴。

推荐阅读