D3の強制レイアウトのデータに応じて形状が異なる

Question

円と三角の2種類の形状がある場合に強制レイアウトを使用しようとしています。しかし、私はエラーが表示されます - 未定義の 'シンボル'のプロパティを読み取ることができません。これは関連するコードスニペットです：

var shape = {"action": "circle", "why-hard": "triangle"};  

var node = g.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("d", d3.svg.symbol().type(function(d) { return shape[d.type]; })) 

Answer 1

あなたはおそらくd3v4を使用しています。 D3v4には、v3からコードを壊すいくつかの名前空間の変更があり、シンボルコードはv3のものです。この例では：Chromeで（述べたように）Uncaught TypeError: Cannot read property 'symbol' of undefined、およびFirefoxでd3.svg is undefined：

.attr("d", d3.svg.symbol().type(function(d) { return shape[d.type]; })) 

はエラーを与えます。代わりに、V4のための線に沿って何かを試してみてください。

.attr("d", d3.symbol().type(function(d,i) { return d3.symbols[i];})) 

はフィドルhereを参照してください：

.attr("d", d3.symbol().type(d3.symbolCross)); 

がV4で動的にタイプを割り当てるには、アプローチは、あなたが持っているものと本質的に同じです。

シェイプに関するv4ドキュメントについてはhttps://github.com/d3/d3-shape/blob/master/README.md#symbolを参照してください。