D3ラジアル

Question

に沿って円弧データを作成するforループなし多次元データへのアクセス、Iは1、2、3、4 [この多次元配列（[0、に見出さ太字のデータにアクセスしようとしています、5]] forループせずに半径方向円弧に沿って項目を追加する。

var dataObject = [ 
    [0, [1, 2, 3, 4, 5]], 
    [90, [10, 20, 30, 40, 50]], 
    [180, [15, 25, 35, 45, 55]] 
]; 

データオブジェクトデータオブジェクト[0] [1]半径値をダウンしている間[0] [0]の開始角度である。

関連コードは次のとおりです。

var arc = d3.arc() 
    .innerRadius(function(d) { 
    return 0; 
    }) 
    .outerRadius(function(d) { 
    return 100; 
    }) 
    .startAngle(function(d, i) { 
    return Math.radians(d[0]); 
    }) 
    .endAngle(function(d, i) { 
    return Math.radians(d[0] + 45); 
    }); 

// Need an extra select statement here? 
    svg.selectAll("path") 
     .data(dataObject) 
     .enter() 
     .append("path") 
     .attr("d", arc); 

私が私のコメント近くのコードの最後のブロックで余分な選択を埋め込むかd3.nestを使用する必要があるように私には思えます。私はどちらかの仕事をすることができませんでした。 https://jsfiddle.net/eog4dxag/2/

Answer 1

あなたが他の参加使用してデータにアクセスすることができ、データ機能がすでに参加したデータを受け取り、[1]その配列から項目にアクセスします。

はここでフィドルです。

let arcs = svg.selectAll("path") 
    .data(dataObject) 
    .enter() 
    .append("g") 
    .attr("class", "parent"); 

arcs.append("path") 
    .attr("d", arc); 

arcs.selectAll(".child") 
    .data(function(d){ return d[1] }) 
    .enter() 
    .append("g") 
    .attr("class", "child") 
    //append whatever you want here 

更新フィドル：https://jsfiddle.net/eog4dxag/5/

Answer 2

var dataObject = [ 
    [0, [1, 2, 3, 4, 5]] 
]; 

svg.selectAll("path") 
    .data(dataObject.map(function(d){ return d[1] })) // should be [1, 2, 3, 4, 5] 

試してみてください、あなたが作成したいものをクリアしていないそのよう

は、この例では、G要素を追加します