DC.js - 单击 geoChoroplethChart 时未过滤 barChart答案

【问题标题】：DC.js - barChart not filtered on click of geoChoroplethChartDC.js - 单击 geoChoroplethChart 时未过滤 barChart
【发布时间】：2016-07-20 17:34:08
【问题描述】：

我有一张县的等值线地图，以及一张显示地图上每个县人口的条形图。当我单击条形图时，地图会被过滤并重新绘制以显示选定的条形图，但是当我单击等值线地图中的县时，条形图不会被过滤以显示人口数据。我不明白为什么它会过滤一种方式而不是另一种方式。任何帮助表示赞赏！

<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();

    }); 

});

【问题讨论】：

我意识到这几乎是一个完整的例子，但如果你能提供一个小提琴 (including the data) 或另一个运行的例子，我们将更容易诊断。跨度>
嗯，这是我尝试将它放入 jsfiddle - jsfiddle.net/bahanson/xo5dw3m6 但它实际上并没有工作，所以我怀疑它是否真的有用。
ftfy: jsfiddle.net/gordonwoodhull/28qsa0jr/4 - 只是通常的版本不匹配，您的数据实际上是制表符分隔而不是逗号分隔。当然，我可能会非常努力地盯着你的代码并弄清楚这一点，因为它可能是最常见的问题，但它确实有助于使用小提琴，谢谢！

标签： d3.js filter dc.js crossfilter

【解决方案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/

【讨论】：