D3でノードにプログラムでノードをシェイプに割り当てる

Question

ノード値に基づいてシェイプを割り当てようとしています。

TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node 

と私はシェーピング機能にノードオブジェクトを返すに失敗するので、この問題が発生し、ある：私が手にエラーがある

// some variables from the UI 
var anodezoom = d3.select("#nodezoom").property("value"); 
var asize = d3.select("#ona").property("value"); 
var acolor = d3.select("#color").property("value"); 
var ameasure = d3.select("#shape").property("value"); 
// build, resize, recolor and reshape the nodes 
nodes = svg.selectAll('.node') 
    .data(graph.nodes.filter(function (d) { 
     return d.degree > 0; 
    })) 
    .enter() 
    .append(function (d) { 
     shaping(ameasure, d); 
    }) 
    .attr('class', 'node') 
    .attr('r', function (d) { 
     return resizing(anodezoom, asize, d); 
    }) 
    .style('fill', function (d) { 
     return coloring(acolor, d); 
    }) 
    .style('stroke', function (d) { 
     return coloring(acolor, d); 
    }) 
    .call(force.drag); 

：

function shaping(ashape, anode) { 
    var shape = null; 
    if (ashape === "gender") { 
     if (anode.gender === "M") { 
      shape = d3.svg.symbolTypes[0]; 
     } else if (anode.gender === "F") { 
      shape = d3.svg.symbolTypes[1]; 
     } else { 
      shape = d3.svg.symbolTypes[2]; 
     } 
    return shape; 
}; 

私のコードは次のようなものです

私は基本的に文字列を返します。文字列を返すことは正当であるため、私にはうってつけです。

.append('circle') 

しかし、それは動作していないので、私のshaping（）関数で割り当てられた正しいシェイプのNodeオブジェクトを返す方法はありますか？何...

nodes = svg.selectAll('path') 
        .data(graph.nodes.filter(function (d) { 
         return d.degree > 0; 
        })) 
        .enter() 
        .append('path') 
        .attr('d', d3.svg.symbol().type(function (d) { 
         return shaping(ashape, d); 
        })) 
        .attr('class', 'node') 
        .attr('r', function (d) { 
         return resizing(anodezoom, asize, d); 
        }) 
        .style('fill', function (d) { 
         return coloring(acolor, d); 
        }) 
        .style('stroke', function (d) { 
         return coloring(acolor, d); 
        }) 
        .call(force.drag); 

が、期待通りにリンクが表示されている間、すべてのノードは、左上隅にかろうじて見える：私は私のコードを変更した

EDIT

私はここで行方不明ですか？

Answer 1

あなたはパスデータを設定するとき、あなたは形状を指定し、D3の形状、パスを追加する必要はありません。ここで

.append('path') 
.attr('d', function(d) { return d3.symbol().type(/* shape */) }); 

は形状（var shape = d3.scaleOrdinal(d3.symbols);）の順序尺度を使用した簡単な例です。

.append('path') 
.attr("d", d3.symbol().type(function(d) { return shape(d.group);})) 

blockに実装されています。この回答はd3v4であり、d3v3コードは少し異なります。両者は、以下の最小限の例で比較されるためのコード：

d3v3：

var svg = d3.select('body') 
 
    .append('svg'); 
 

 
svg.selectAll('path') 
 
    .data(d3.range(6)) 
 
    .enter() 
 
    .append('path') 
 
    .attr('transform',function(d,i) { return 'translate('+(i * 30 + 30) + ',20)'; }) 
 
    .attr('d',d3.svg.symbol() 
 
       .type(function(d,i){ return d3.svg.symbolTypes[i]; }) 
 
       .size(function(d,i){ return i * 30 + 30; }) 
 
     )

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

d3v4：

var svg = d3.select('body').append('svg').attr('width',400).attr('height',200); 
 

 
svg.selectAll('.symbol') 
 
    .data(d3.range(6)) 
 
    .enter() 
 
    .append('path') 
 
    .attr('transform',function(d,i) { return 'translate('+(i*30+30)+','+30+')';}) 
 
    .attr('d',d3.symbol() 
 
      .type(function(d,i){ return d3.symbols[i];}) 
 
      .size(function(d,i){ return i * 30 + 30; }) 
 
    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>