javascript - d3js強制レイアウトは、ノードごとに画像または円を動的に追加します

Question

私は D3JS を初めて使用します。ノードごとに画像または円の両方を含む強制レイアウトを作成する必要があります。つまり、Image ノードまたは Circle ノードが動的に追加されます。これは可能ですか？例があれば回答してください

Answer 1

円の真ん中に画像を置きたいだけなら、これを試してください：

/* Create nodes */
var node = vis.selectAll("g.node")
    .data(json.nodes) // get the data how you want
    .enter().append("svg:g")
    .call(node_drag);

/* append circle to node */
node.append("svg:circle")
    .attr("cursor","pointer")
    .style("fill","#c6dbef")
    .attr("r", "10px"})

/* append image to node */
node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

タイトルやテキストを追加することもできます... 詳細については、のドキュメントを参照しselection.append(name)てください。