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 回答