D3.js - 外部データの読み込みと操作

Question

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

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

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

しかし、私はD3のデータ関数の外にサンバーストチャートを描画する方法がわかりません。私は（当然、それは動作しませんでした）以下のコードを試みたが、代わりにJSONを介してデータをロードする構造が見えるようにインラインで含ま：

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

：ここ

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は次のようになります。

私はかなりシンプルな何かをやっていると確信していますが、D3がすべてのデータをどのように通り抜けて、ダイアグラムをマップするかを頭に浮かべるのは難しいです。 d3.jsonのような機能

どのような考えですか？

Answer 1

partition.nodes(nest)を呼び出して、パスをレンダリングするための適切なレイアウト位置にデータを入力するのを忘れてしまったようです。あなたがにリンクされているsunburst exampleで

は、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を呼び出す必要がありますsomewhereこれ以外の場合、データにはポジションがありません。

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