Question

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

<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/

DC.js - 点击geoChoroplethChart时未过滤barChart

1 个答案: