geoChoroplethChart карта с различной непрозрачностью заполнения для выбранного элемента

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

, чтобы выделить область (ы), которые выбираются /.