在d3中过滤和传递csv数据

我希望能够过滤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来说是新的]和道歉[如果这是显而易见的，请道歉]适用。 谢谢 Anna

根据饼图布局返回：

• value—值访问器返回的数据值
• startAngle-弧的起始角（弧度）
• endAngle—圆弧的终止角（以弧度为单位）
• 数据-此圆弧的原始基准

因此，在代码中，“csv”保存所有行对象。调用饼图布局将使用这些对象和（可能隐含的）值访问器来计算所有楔子的开始和结束角度。它以相同的顺序返回具有上面列出的四个属性的新闻对象。“数据”属性存储生成楔块的原始对象（来自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); });

---

没有所谓的

d.csv

。加载csv数据时，d3创建

数据

属性，您可以在该属性处访问所有csv数据。只需使用

d.data

调用

.data（pie（csv））

时，实际上会填充

数据
属性。这将告诉d3将
csv
数据与选定的html/svg元素（即g.arc）连接起来

之后，当通过
.style（“fill”，…）
设置路径元素的样式时，通常不再需要访问原始
csv
数组了，太棒了！非常感谢。“csv[i].name”有效！你的解释让这一切变得有意义。谢谢尤文。这肯定有助于澄清问题。