从 csv 创建多列维度

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 级别上，逗号 "operator" 只评估逗号的两边，而 returns 第二个。所以

的值

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

Gordon 的建议应该可行，但我还敦促您考虑预先将数据转换为更合适的格式。当使用很多不同的工具时，它会在很多方面让你的生活更轻松。具体来说，您需要将文件转换为只有三列：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 创建多列维度

Creating multiple column dimension from csv

crossfilter

dc.js