1

I would like to be able to filter csv data for use in a series of dynamic pie charts. (That is, the user will be presented with an initial pie chart, and will be able to click on a specific pie wedge/category to pull up another pie chart showing details for that category).

This is the relevant code, to be called within an "update" function with the "selected" variable as input:

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); });

Color, arc, and pie were previously (successfully) defined with scale.ordinal, svg.arc, and layout.pie.

The above code nearly works -- but doesn't get the fill color of the pie pieces right. When I use d.data.name in the last line (see below), the code works fine. Can someone please explain to me why? 

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

It probably goes without saying, but the usual caveats [new to d3] and apologies [sorry if this is obvious] apply. Thanks! Anna

4

2 に答える 2

0

のようなものはありませんd.csv。csvデータをロードするとき、d3はdataすべてのcsvデータにアクセスできるプロパティを作成します。を使用するだけd.dataです。

dataを呼び出すと、プロパティは実際に入力されます.data(pie(csv))。これにより、d3は、選択されたhtml / svg要素（つまり、g.arc 's）とデータを結合するように指示されます。csv

その後、 。を介してパス要素をスタイリングするときに、通常はraw 配列にアクセスする必要はありません。csv.style("fill", ...)

于 2012-10-24T21:14:03.047 に答える
0

ドキュメントによると、パイ レイアウトは次を返します。

  • value - value アクセサーによって返されるデータ値。
  • startAngle - ラジアン単位の円弧の開始角度。
  • endAngle - ラジアン単位の円弧の終了角度。
  • data - この円弧の元のデータム。

したがって、コード「csv」では、すべての行オブジェクトが保持されます。パイ レイアウトを呼び出すと、これらのオブジェクトと (暗黙の可能性がある) 値アクセサーを使用して、すべてのウェッジの開始角度と終了角度を計算します。上記の 4 つのプロパティを使用して、ニュース オブジェクトを同じ順序で返します。「データ」プロパティには、ウェッジを生成した元のオブジェクト (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 に答える