在d3地图上设置click事件的颜色

Question

我目前在我的地图中有县,突出显示并删除鼠标悬停和鼠标移除时的突出显示.我想为click事件设置一个单独的颜色 - 这意味着所选的县将保持这种新颜色,直到单击一个新的县,而不管任何鼠标悬停或鼠标移除事件.我目前在点击时改变了县的颜色,但只有当鼠标在元素上方时才会改变.

这是我现在拥有的:

        .call(d3.helper.tooltip()
          .text(function(d){ return 'County: '+ newDict[d.id][0] + '<br />HOPE Dollars: $' +commasFormatter(newDict[d.id][1]); }))
          .on('mouseover', function(d){ d3.select(this).style({fill: '#FAAE0A', stroke: '#F08C00', opacity:'0.5', 'stroke-width':'3px'}); })
          .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: '', opacity:'1', 'stroke-width':''}); })
        .on("click", function(d) {
        $('#nameCounty').html(''+ newDict[d.id][0] +'')
        d3.select(this).style({fill: '#F08C00', stroke: '', opacity:'1', 'stroke-width':''});
        });

Answer 1

如果要在单击另一个项目时"取消突出显示"某个项目,则需要一种方法来查找先前突出显示的项目并取消设置其"突出显示"状态.

一种方法是为class突出显示的项目指定一个特定的项目,以便您稍后再次找到它.您是否使用它来设置项目的样式无关紧要.

例如,在click下面的内容中,首先通过搜索具有.highlighted该类的项来找到先前突出显示的项,.highlighted从该项中删除该类,然后将该.highlighted类分配给当前项:

.on("click", function () {
            // Find previously selected, unselect
            d3.select(".selected").classed("selected", false);

            // Select current item
            d3.select(this).classed("selected", true);
        });

你可以在这个小提琴中尝试一下.