dagre-d3 如何单击节点并在此之后运行事件

Question

我正在使用 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 此外，这似乎使用了我无法使用的不同方法。

请指导我

谢谢，尼希尔

Answer 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)

  })
})