6

dagre-d3.js を使用して階層グラフを作成しています。ここで、ノードをクリック可能にして機能を実行する必要があります。私はそれを達成することができません。

現在、私のコードの一部は次のようになります

var g = new dagreD3.graphlib.Graph().setGraph({});
g.setNode("TEST", { label: "TEST"})
g.setNode("TEST1", { label: "TEST1"})

g.setEdge("TEST", "TEST1", { label: "open", style: "stroke: green; stroke-width: 2px;fill: none", arrowheadStyle: "fill: green" });

var svg = d3.select("svg"),
inner = svg.select("g");

var render = new dagreD3.render();
render(inner, g);
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);

TEST または TEST1 をクリックして、作成した関数を実行して、ページ上の同じ名前の div (TEST, TEST1) に移動できるようにする必要があります。

私はこれを見てきましたが、それは私を助けません。 https://github.com/cpettitt/dagre-d3/issues/13 また、これは私が利用できない別の方法を使用しているようです。

ガイドしてください

ありがとう、ニヒル

4

4 に答える 4

3

これは興味深いアプローチのように思えます。

しかし、私が見つけた組み込みの方法がいくつかありました

ここに私の解決策があります

var selections = inner.selectAll("g.node");
        selections
          .on('click', function (d) { ScrollToID(d); });
于 2015-02-12T16:00:55.533 に答える
1

jquery を使用してクリック時にノード タグを選択し、ノード名を解析して関数に渡すことができます。このようなもの：

$(document).ready(function() {
  $('.node').click(function() {

    // This gets the node name from the 'class' attribute
    var class_header = $(this).attr('class').split(' ');
    var node_name = class_header[class_header.length - 1]

    // Execute your function
    myFunction(node_name)

  })
})
于 2015-02-11T15:23:04.693 に答える