Question

我正在尝试使用csv文件中的多个列制作饼图，我可以生成饼图，但它只使用最后一个值d.gre。我做错了什么？

代码低于

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

var ndx = crossfilter(data);
var partysDim = ndx.dimension(function(d) { return +d.rep, +d.dem, +d.lib, +d.ind, +d.gre;})
var partys = partysDim.group();

var pie = dc.pieChart('#chart-pie');

pie
    .width(180)
    .height(180)
    .radius(80)
    .dimension(partysDim)
    .group(partys)
    .renderLabel(true)
    .innerRadius(10)
    .transitionDuration(500)
    .colorAccessor(function (d, i) { return d.value; });

    dc.renderAll();
});

electVotes.csv

state, rep,dem,lib,ind,gre Alabama,1314431,725704,44211,20276,9341 New York,5655,54444,65666,2355,12225 Texas,4355,543234,12321,12331,45644

Answer 1

这里有几个问题。在JavaScript级别，逗号＆＃34;运算符＆＃34;只是评估逗号的两边并返回第二个。所以

的价值

1,2,3,4,5

只是5。这样就解释了您目前获得的结果。

另一个问题更具概念性。 Crossfilter不是为了显示组中的每一列而设计的。我认为主要原因是没有办法过滤政党，因为每个地区或国家都有每个政党的价值观。您需要选民级别的数据按方进行过滤。

鉴于这种限制，你肯定无法通过点击饼图进行过滤。但是，通过一些工作，您可以让饼图将列总和显示为组的分类。

正如Ethan所说，转换数据可能会更好，但this answer shows how to produce a group which rotates the data on the fly。

Answer 2

戈登的建议应该有效，但我也建议您考虑事先将数据转换为更合适的格式。当使用许多不同的工具时，它会以很多方式让您的生活更轻松。具体来说，您需要将文件转换为只有三列：State，Party和Votes。如果要在Excel中维护此数据，请在此处执行此操作。或者您可以在加载的文件上运行此命令：

var newData = []
data.forEach(function(d) {
  newData.push({state: d.state, party: 'rep', votes: d.rep})
  newData.push({state: d.state, party: 'dem', votes: d.dem})
  newData.push({state: d.state, party: 'lib', votes: d.lib})
  newData.push({state: d.state, party: 'ind', votes: d.ind})
  newData.push({state: d.state, party: 'gre', votes: d.gre})
})
data = newData

然后，您的Crossfilter维度和组创建将如下所示：

var ndx = crossfilter(data);
var partysDim = ndx.dimension(function(d) { return d.party;})
var partys = partysDim.group().reduceSum(function(d) { return d.votes;});

同样，这是处理同一问题的另一种方法。我认为通过正确的方式组织您的数据有很大的回报，所以我通常建议做这项工作，然后保持Crossfilter / dc.js代码简单明了。

从csv创建多个列维度

2 个答案: