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

您可以在this fiddle中试用。

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

1 个答案: