Question

我试图将饼图链接到地图，这样当您点击状态时，饼图会更新为该状态的常用投票。

目前我的饼图显示为空。

Csv的格式如下：

state, party, votes
Alabama,dem,725704
Alabama,rep,1314431
Alabama,lib,44211
Alabama,gre,20276
Alabama,con,9341
Alaska,dem,116454
Alaska,rep,163387
Alaska,lib,18725
Alaska,gre,5735
Alaska,con,3866
Alaska,other,10441

我的代码：

d3.csv("elecVotes.csv", function (data) {
    d3.json("us.json", function (json){

       // set up crossfilter on the data.
        var ndx = crossfilter(data);

    // set up the dimensions
        var stateDim = ndx.dimension(function (d) { return d.state; });
        var party = partyDim.group().reduceSum(function(d) { return d.votes;});
        var votesDim = ndx.dimension(function(d) { return d.votes; });

    // set up the groups/values
        var state = stateDim.group();
        var party = partyDim.group(); 
        var votes = votesDim.group();

    // the 4 different charts - options are set below for each one.
        var pie = dc.pieChart('#chart-pie');
        var usmap = dc.geoChoroplethChart("#usmap");

    //create pie from to show popular vote for each state
        pie
        .width(180)
        .height(180)
        .radius(80)
        .dimension(partyDim)
        .group(votes)
        .renderLabel(true)
        .innerRadius(10)
        .transitionDuration(500)
        .colorAccessor(function (d, i) { return d.value; });

    //display US map                    
        usmap
        .width(900)
        .height(500)
        .dimension(stateDim)
        .group(state)
        .colors(["rgb(20,202,255)","rgb(144,211,035)"])
        .overlayGeoJson(json.features, "name", function (d) { return d.properties.name; })      


        // at the end this needs to be called to actually go through and generate all the graphs on the page.
        dc.renderAll();
    }); 
    });

我不确定我做错了什么

Answer 1

我认为你不想要一个votesDim - 它会按照投票数分组，所以你可能最终会为每个计数设置一个不同的bin，因为它们可能是唯一的。

我猜你可能想要计算每一方的投票数，所以：

var partyGroup = partyDim.group().reduceSum(function(d) { return d.votes; });

请记住，维度指定要过滤的内容，而组则是聚合和读取数据的位置。

您还需要在开始之前明确转换任何数字，因为d3.csv会将每个字段作为字符串读取。所以：

data.forEach(function(r) {
  r.votes = +r.votes;
});
var ndx = crossfilter(data);

不确定这是否有助于解决您的问题。请注意，这实际上与地图无关;饼图应该能够独立于地图的作用而绘制自己。

修改

我打赌问题是列名中的那些空格。您可以轻松地以这样的方式结束名为" party"和" votes"的字段...

dc.js饼图为空

1 个答案:

修改