DC.js - barChart가 geoChoroplethChart 클릭시 필터링되지 않았습니다.

Question

나는 카운티의 choropleth 맵과 각 카운티의 인구를 보여주는 막대 차트가 있습니다. 막 대형 차트를 클릭하면지도가 필터링되고 선택된 막대가 표시되도록 다시 그려지지만 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를 위해 이제까지 가장 자주 묻는 질문 무엇인가?

왜 차트가 필터링되지 않습니까?

그리고 가장 빈번한 답변은 무엇입니까?

차트의 크기가 동일합니다. 또는 두 번째 차트의 그룹이 첫 번째 차트가 필터링하는 것과 동일한 차원을 준수하고 있습니다. 이는 그룹이 자체 차원을 관찰하지 않기 때문에 변경 사항을 볼 수 없음을 의미합니다.

당신이이 방향으로 나아 가기 시작한 것처럼 보이지만 차원 만 복제했습니다. 두 차트 모두 동일한 그룹을 관찰하고 해당 그룹이 맵의 차원에서 생성되기 때문에 맵에서 필터링을 관찰하지 않습니다. 대신

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/