DC.js - barChartはgeoChoroplethChartのクリックでフィルタリングされません

Question

私は郡のchoroplethマップと、マップ上の各郡の人口を示す棒グラフを持っています。棒グラフをクリックすると、選択された棒グラフが表示されるように地図がフィルタリングされ、再描画されますが、棒グラフは集団データを表示するためにフィルタリングされません。私はそれがなぜ一方の方法ではなく他のものではないのかを理解していません。どんな助けもありがとう！

<div id="iowa-map"> 
    <strong>Population by counties (color: total population)</strong> 
    <a class="reset" href="javascript:iowaMap.filterAll();dc.redrawAll();" style="display: none; ">reset</a> 
    <span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span> 
    <div class="clearfix"></div> 
</div> 

<div id="population-chart"> 
    <strong>Population by county</strong> 
    <a class="reset" href="javascript:populationChart.filterAll();dc.redrawAll();" style="display: none; ">reset</a> 
    <span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span> 
    <div class="clearfix"></div> 
</div> 

<div class="clearfix"></div> 

<div> 
    <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a> 
</div> 

var iowaMap = dc.geoChoroplethChart("#iowa-map"); 
var populationChart = dc.barChart("#population-chart"); 

d3.csv("iowaCountiesPop.csv", function (data) { 

     data.forEach(function (d) { 
     d.county = d.county; 
     d.popByCounty = +d.e2015; 
     }); 

     var data = crossfilter(data); 

     var counties = data.dimension(function (d) { 
     return d.county; 
     }); 

     var counties2 = data.dimension(function (d) { 
     return d.county; 
     }); 

     var popByCounty = counties.group().reduceSum(function (d) { 
     return d.popByCounty; 
     }); 


    d3.json("IowaCounties.json", function (countiesJson) { 
     iowaMap.width(990) 
       .height(500) 
       .dimension(counties) 
       .group(popByCounty) 
       .projection(d3.geo.mercator() 
        .translate([495, 250]) 
        .rotate([93 + 20/60, -41 - 60/60]) 
        .scale(7900)) 
       .colors(d3.scale.quantile().range(colorScheme[quantiles])) 
       .colorDomain([0, 430640]) 
       .overlayGeoJson(countiesJson.features, "NAME", function (d) { 
        return d.properties.NAME; 
       }) 
       .title(function (d) { 
        return d.key + " County \nTotal Population: " + numberFormat(d.value); 
       }) 
       .on('renderlet', function(map) { 
        map.selectAll("path").on("click", function(d) { 
        //console.log("click!", d) 
        map.filter(d.properties.NAME) 
         .redrawGroup(); 
        }) 
       }); 


     populationChart.width(width) 
      .height(height) 
      .dimension(counties2) 
      .group(popByCounty) 
      .x(d3.scale.ordinal().domain(counties)) 
      .xUnits(dc.units.ordinal) 
      .margins({top: 0, right: 0, bottom: 70, left: 70}) 
      .yAxisLabel(["Population Values"])//,[12]) 
      .xAxisLabel("County Names") 
      .barPadding(0.1) 
      .outerPadding(0.05) 
      .elasticY(false) 
      //.turnOnControls(true) 
      .on('renderlet', function(chart) { 
       chart.selectAll('rect').on("click", function(d) { 
        //console.log("click!", d) 
        chart.filter(d.data.key) 
         .redrawGroup(); 
       }) 
       chart.selectAll("g.x text") 
        .style("text-anchor", "end")  
        .attr("dx","-8") 
        .attr("dy", "5")   
        .attr("transform", "rotate(-50)"); 
      }); 

     dc.renderAll(); 

    }); 

}); 

Answer 1

のでdc.jsのためにこれまでで最もよく寄せられる質問は何ですか？

なぜチャートがフィルタリングされないのですか？

そして、最も頻繁な回答は何ですか？

グラフの次元は同じです。つまり、2番目のグラフのグループは、最初のグラフがフィルタリングしているのと同じディメンションを監視しています。これは、グループが自分の次元を観察しないため、変更が反映されないことを意味します。

あなたがこの方向に向かい始めたように見えますが、次元が重複しているようです。どちらのチャートも同じグループを観察しており、そのグループはマップのディメンションから生成されるため、マップ上でのフィルタリングは行われません。代わりに

iowaMap 
    .dimension(counties) 
    .group(popByCounty) 

populationChart 
    .dimension(counties2) 
    .group(popByCounty) 

：

function pop_by_county(dim) { 
    return dim.group().reduceSum(function(d) { 
    return d.popByCounty; 
    }); 
} 

var popByCounty = pop_by_county(counties), 
    popByCounty2 = pop_by_county(counties2); 

populationChart 
    .dimension(counties2) 
    .group(popByCounty2) 

https://jsfiddle.net/gordonwoodhull/28qsa0jr/7/