Question

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

这是相关代码，在“更新”功能中调用“选定”变量作为输入：

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 时（见下文），代码工作正常。有人可以向我解释原因吗？

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

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

Answer 1

根据documentation饼图布局返回：

value - 值访问器返回的数据值。
startAngle - 以弧度为单位的弧的起始角度。
endAngle - 弧度的弧度结束角度。
数据 - 此弧的原始数据。

所以在你的代码＆＃34; csv＆＃34;保存所有行对象。调用饼图布局会使用这些对象和（可能隐含的）值访问器来计算所有楔形的起始角度和结束角度。它以相同的顺序返回具有上面列出的四个属性的新闻对象。＆＃34;数据＆＃34; property存储生成wedge的原始对象（来自你的csv列表）。

因此，完全有道理：

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

变为

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}}]

理论上你也应该能够使用

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

Answer 2

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

当您致电data时，.data(pie(csv))属性实际上已填充。这将告诉d3 加入 csv数据与所选的html / svg元素（即 g.arc ）。

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

在d3中过滤和传递csv数据

2 个答案: