1

強制指向グラフ レイアウトのこの例で遊んでみました。www.bl.ocks.org/GerHobbelt/3071239

または直接操作するには、ここでフィドルを使用します http://jsfiddle.net/BeSAb/

私が欲しいのは、円要素を置き換えることでした

  node = nodeg.selectAll("circle.node").data(net.nodes, nodeid);
  node.exit().remove();

  node.enter().append("circle")
      .attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
      .attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .style("fill", function(d) { return fill(d.group); })
      .on("click", function(d) {
        console.log("node click", d, arguments, this, expand[d.group]);
        expand[d.group] = !expand[d.group];
    init();
      });

svg foreignObject を含むグループ (g) 要素を使用

node = nodeg.selectAll("g.node").data(net.nodes, nodeid);
node.exit().remove();

var nodeEnter = node.enter().append("foreignObject")
//simplified for this demo
        .attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
        .attr('width', '22px')
        .attr('height', '22px')
        .attr('x', -11)
        .attr('y', -11)
        .append('xhtml:div')
            .style("background",function(d){return fill(d.group)})
            .style("width","20px")
            .style("height","20px")
            .style("padding","2px")
       .on("click", function(d) {
       console.log("node click", d, arguments, this, expand[d.group]);
       expand[d.group] = !expand[d.group];
       init();
       });

グラフは正しく作成されていますが、ノードをクリックして展開しようとすると、グラフが更新されないようです。すべての古いノードが複製されるようにします。

ノードをクリックしてこの問題を表示できる別のフィドルを作成します。 http://jsfiddle.net/xkV4b/

誰かが私が何を忘れたか、または問題が何であるかを知っていますか?

どうもありがとうございました！

4

1 に答える 1

1

enter append は、おそらく nodeg での選択と一致するはずです。しかし、それでも d3 は「foreignObject」のものを選択する際に問題があるようです。これは、 d3 google グループで取り上げる質問/問題である可能性があります。これはバグである可能性があります。

ただし、クラスを選択するだけで回避できます。コードを次のように更新しました。

node = nodeg.selectAll(".fo-node").data(net.nodes, nodeid);
node.exit().remove();

var nodeEnter = node.enter().append("foreignObject")
    .attr("class", function(d) { return "fo-node node" + (d.size?"":" leaf"); })
    .attr('width', '22px')
    ...

うまくいくようです。

于 2013-03-04T23:54:20.100 に答える