所选项目具有不同填充不透明度的 geoChoroplethChart 地图

Question

我已经实现了 infographic / map using crossfilter and 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;
}

突出显示 is/are 选择的区域。

所选项目具有不同填充不透明度的 geoChoroplethChart 地图

geoChoroplethChart map with different fill opacity for the selected item

data-visualization

d3.js

crossfilter

dc.js