Question

我使用infographic / map和crossfilter实施了d3.js。

我想要的是添加......

的功能

当用户点击特定实体时，在我的情况下是欧盟的成员国，所选州的填充不透明度与其余部分区别开来，即变得更暗。

我找到了一个很好的例子here，但是那里的代码并没有准确地指定处理选择状态的部分。

正如您在my map上看到的那样，在地图上没有任何区别选定的状态，我觉得这对用户来说非常令人不安。

我的所有代码都可以找到here。

这是与地图本身最密切相关的部分：

        //This is the data for the Map
    d3.json("data/europe.json", function (error, eu) { 

        console.log('map', eu)
        usChart
        .width(590)
        .height(500)
        .projection(projection
                    .scale((1200 + 1) / 2 )
                    .translate([660 / 4, 3360 / 4])
                    .precision(.1)
                    )
                .dimension(countries)
                .group(countriesJobsdSum)

                    .filterHandler(function(dimension, filter){     
    dimension.filter(function(d) {return usChart.filter() != null ? d.indexOf
    (usChart.filter()) >= 0 : true;}); // perform filtering
    return filter; // return the actual filter value
 })

                .colors(d3.scale.quantize().range(
                    ["#8c857d", "#d982ab", "#d9525e", "#a63f52", "#8c6976", "#55b1b1", "#637e9e"])
                )
                .colorDomain([0, 200])
                .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; })
                .overlayGeoJson(eu.features, "countries", function (d) {
                    return d.properties.name;
                    //return d.properties.Country;
                })
                .transitionDuration(0)
                .title(function (d) {
                    return "Country: " + d.key + "\nNumber of Jobs: " + numberFormat(d.value ? d.value : 0) ;
                });

Answer 1

好消息是dc.js已经添加了类来定位选定和取消选择的元素。你只需要添加css来设置这些元素的样式，但是你需要它们。

您可以执行类似

的操作

g.deselected path {
    fill: gray;
}

从取消选择的区域中删除颜色。

或者你可以

g.selected path {
    stroke: yellow;
    stroke-width: 2px;
}

突出显示已选择的区域。

具有所选项

1 个答案: