9

私は D3.js を初めて使用し、さまざまなチュートリアル/演習/などで遊んでいますが、D3 の基本的な必要性は、外部データ (通常は JSON) をロードし、そのデータに基づいてインタラクティブなグラフを描画することです。

基本的なサンバーストの例は次のとおりです。

ここに画像の説明を入力

私はそれを自分のデータにうまく適応させました。ただし、データの配信を簡素化し、D3.js 内で一部の操作を処理したいと考えていました。たとえば、サンバースト ダイアグラムの準備が整った階層配列の代わりに、D3 で必要に応じて操作できるフラット データ ファイルを提供したいと考えています。

しかし、D3 のデータ関数の 1 つ以外でサンバースト チャートを描画する方法がわかりません。以下のコードを試してみましたが、json 経由でデータをロードする代わりに、インラインで含まれているため、構造が表示されます (当然のことながら、機能しませんでした)。

var w = 960, 
    h = 700, 
    r = Math.min(w, h) / 2, 
    color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h) 
       .append("svg:g") 
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var partition = d3.layout.partition() 
    .sort(null) 
    .size([2 * Math.PI, r * r]) 
    .value(function(d) { return 1; }); 
var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 
var data = [ 
                        {'level1': 'Right Triangles and an Introduction to Trigonometry', 
'level2': '', 'level3': '', 'level4': '', 'branch': 'TRI', 'subject': 
'MAT'}, 
                        {'level1': '', 'level2': 'The Pythagorean Theorem', 'level3': '', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
                        {'level1': '', 'level2': '', 'level3': 'The Pythagorean Theorem', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
                        {'level1': '', 'level2': '', 'level3': 'Pythagorean Triples', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'} 
                        ]; 
console.log(data); // looks good here 
var nest = d3.nest() 
        .key(function(d) { return d.subject;}) 
        .key(function(d) { return d.branch;}) 
        .entries(data); 
console.log(nest); // looks good here 
var path = vis.selectAll("path") 
      .data(nest) 
    .enter().append("svg:path") 
      .attr("display", function(d) { return d.depth ? null : 
"none"; }) // hide inner ring 
      .attr("d", arc) 
      .attr("fill-rule", "evenodd") 
      .style("stroke", "#fff") 
      .style("fill", function(d) { return color((d.children ? d : 
d.parent).name); });

HTML は次のようになります。

<div class="gallery" id="chart">
    <svg width="960" height="700">
        <g transform="translate(480,350)">
            <path display="none" d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNL0,0Z" fill-rule="evenodd" style="stroke: #ffffff; "/>
        </g>
    </svg>
</div>

私はかなり単純な何か間違ったことをしていると確信していますが、関数内に描画関数をネストしていない場合、D3 がすべてのデータを調べてダイアグラムをマップする方法を理解するのに苦労しています。 d3.json のように。

何かご意見は？

4

1 に答える 1

3

partition.nodes(nest)パスをレンダリングするための適切なレイアウト位置をデータに入力するために呼び出すのを忘れたようです。

リンクしたサンバーストの例では、JSON データは次のようにバインドされています。

var path = vis.data([json]).selectAll("path")
    .data(partition.nodes)
  .enter().append("path")
    // …

これは次と同等です。

var path = vis.selectAll("path")
    .data(partition.nodes(json))
  .enter().append("path")
    // …

どちらのアプローチも機能しますが、partition.nodes どこかで呼び出す必要があります。そうしないと、データに位置がなくなります。

また、指定されたネストされたフィールドはすべて同じであるため、指定されたネストを含むサンプル データは、単一のノードを持つ階層を生成することに注意してください。

于 2012-05-08T22:39:36.910 に答える