1

(D3初心者はこちら)

次のスニペットがあります。

// myShape (node) group
// NB: the function arg is crucial here! nodes are known by id, not by index!
myShape = myShape.data(nodes, function(d) { return d.nodeId; });

// update existing nodes (reflexive & selected visual states)
myShape.selectAll('circle')
    .style('fill', function(d) { return (d === selected_node) ? d3.rgb(colors(d.nodeType)).brighter().toString() : colors(d.nodeType); })
    .classed('reflexive', function(d) { return d.reflexive; });

// add new nodes
var g = myShape.enter().append('svg:g');

g.append('svg:circle')
    .attr('r', 12)

しかし、これをもっと柔軟にしたいと思います。円だけを使用する代わりに、円と多角形を使用したいと思います。これは、d: のプロパティで選択されます。

var d = [
    { nodeId: 1, nodeType : 'type1' , shape: 'circle' },
    { nodeId: 2, nodeType : 'type2' , shape: 'triangle' },
];

つまり、d.shape によって異なります。「svg:circle」または「svg:polygon」を設定してから、半径 (円の場合) またはポイント (ポリゴンの場合) を設定する必要があります。私はこのようにsvg形状を設定しようとしました：

g.append(function (d) { 
    if (d.shape === 'circle' ) { return 'svg:circle'; } 
    else { return 'svg:polygon'; } } )

しかし、これは機能していません:

Uncaught Error: NotFoundError: DOM Exception 8

append関数を受け入れないようですか？ノードごとに svg シェイプを設定するにはどうすればよいですか?

編集

やりたいことを示すために、このjsbinを用意しました。

4

1 に答える 1

1

append最近のバージョンの D3 では、関数呼び出しの結果である要素を使用できます。つまり、静的な名前を渡す代わりに、追加する要素に評価される関数を渡すことができます。

あなたが使っている方法ではうまくいきません。関数から要素の名前を返すだけでは十分ではありません。それ以外の

g.append(function (d) { return svgShape(d); })

どこでsvgShape文字列を返す場合、次のようなことをする必要があります

g.append(function(d) {
  return document.createElementNS("http://www.w3.org/2000/svg", svgShape(d));
})

対応する形状が作成されます。デモ用にここでjsbin を更新しました。

pathあなたの場合、常に a を追加し、ラインジェネレーター、つまりd属性値を変更する方が簡単かもしれません。つまり、円の場合は円形パスを返す関数を渡し、ポリゴンの場合は特定のポリゴン パスを返す関数などを渡します。

于 2013-08-23T12:58:33.793 に答える