关于d3.js：在d3中过滤并传递CSV数据


Filtering and passing csv data in d3

我希望能够过滤csv数据以在一系列动态饼图中使用。 (也就是说，将向用户显示一个初始饼图，并且可以单击特定的饼图楔形/类别以拉出显示该类别详细信息的另一个饼图)。

这是相关的代码，将在"更新"函数中以"选定"变量作为输入进行调用：

1
2
3
4
5
6
7
8
9
10
11
d3.csv("budget.csv", function(i,data) {
var csv = data.filter(function(row) {
    return row["category"] == selected});  
var g = revenue.selectAll(".arc")
    .data(pie(csv))
  .enter().append("g")
    .attr("class","arc");
g.append("path")
    .attr("d", arc)
    //This doesn't work
    .style("fill", function(d) { return color(d.csv.name); });

先前(成功)使用scale.ordinal，svg.arc和layout.pie定义了颜色，弧线和饼图。

上面的代码几乎可以正常工作-但无法正确获得饼图的填充颜色。 当我在最后一行中使用d.data.name时(请参见下文)，代码可以正常工作。 有人可以向我解释原因吗？

1
2
    //This works
    .style("fill", function(d) { return color(d.data.name); });

可能不言而喻，但通常的警告[d3的新手]和道歉[抱歉，如果很明显的话]适用。
谢谢！
安娜

没有d.csv之类的东西。加载csv数据时，d3创建data属性，您可以在其中访问所有csv数据。只需使用d.data。

当您调用.data(pie(csv))时，实际上会填充data属性。这将告诉d3将csv数据与选定的html / svg元素(即g.arc)连接在一起。

之后，通过.style("fill", ...)设置路径元素的样式时，通常通常不再需要访问原始的csv数组。

相关讨论

根据文档，饼图布局返回：

  • value-值访问者返回的数据值。
  • startAngle-弧的起始角度(弧度)。
  • endAngle-弧的结束角(以弧度为单位)。
  • data-此弧的原始基准。

因此，在您的代码中，" csv"包含所有行对象。调用饼图布局需要这些对象和(可能是隐含的)值访问器，以计算所有楔形的起始角度和终止角度。它以相同的顺序返回具有上面列出的四个属性的新闻对象。"数据"属性存储生成楔形的原始对象(来自csv列表)。

因此，遵循所有这些都是很有意义的：

1
csv: [{name:bob, value:10}, {name:alice, value:10}]

变成

1
2
pie(csv): [{value: 10, startAngle:0, endAngle:3.14, data: {name:bob, value:10}},
           {value: 10, startAngle:3.14, endAngle:6.28, data: {name:alice, value:10}}]

从理论上讲您也应该能够使用

1
.style("fill", function(d,i) { return color(csv[i].name); });

相关讨论