1

我希望能够过滤 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 的新功能] 和道歉 [对不起，如果这很明显] 适用。谢谢！安娜

4

2 回答 2

0

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

  • value - 数据值，由值访问器返回。
  • startAngle - 弧的起始角度，以弧度为单位。
  • endAngle - 弧的结束角度，以弧度表示。
  • data - 此弧的原始基准。

因此，在您的代码中，“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); });
于 2012-10-24T20:53:21.397 回答
0

没有这样的事情d.csv。加载 csv 数据时，d3 创建data可以访问所有 csv 数据的属性。只需使用d.data.

当data您调用.data(pie(csv)). 这将告诉 d3 将数据与选定的csvhtml/svg 元素（即g.arc的）连接起来。

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

于 2012-10-24T21:14:03.047 回答