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

我正在使用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）

我已经看过了，但对我没有帮助。 而且，这似乎使用了不同的方法，这对我来说是不可用的

请引导我

谢谢，

---

Nihir

您可以使用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)

  })
})

---

这听起来是一个有趣的方法

但是有一些内在的方法，我刚刚发现

这是我的解决办法

var selections = inner.selectAll("g.node");
        selections
          .on('click', function (d) { ScrollToID(d); });

---

以下是4个鼠标事件：

d3.selectAll('svg g.comp')
  .on('mouseover', function(d) {
    console.log('mouseover');
  })
  .on('mouseout', function(d) {
    console.log('mouseout');
  })
  .on('mousedown', function(d) {
    console.log('mousedown');
  })
  .on('mouseup', function(d) {
    console.log('mouseup');
  });

var json={“nodes”：[{“name”：“Node1”，“group”：2}，{“name”：“Node2”，“group”：1}，{“name”：“Node3”，“group”：1}]，
“链接”：[{“源”：0，“目标”：1，“值”：2}，{“源”：0，“目标”：2，“值”：2}]}；
可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
force.nodes（json.nodes）
.links（json.links）
.start（）；
var link=svg.selectAll（“.link”）
.data（json.links）
.enter（）.append（“行”）
.attr（“类”，函数（d）{return[“link”，d.source.name，d.target.name].join（“”；}）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
//建立邻居词典
var node2neights={}；
for（var i=0；i

同时：

.on（'click'，函数（d）{…}）欢迎使用堆栈溢出。在回答问题时，最好为代码提供一些上下文。为什么你发布的代码解决了OP的问题？你的答案与其他已经给出的答案有什么不同。这总是一个好主意，但当你回答像这样的老问题时，这一点尤其重要。
var json = {"nodes": [{"name": "Node1", "group": 2},{"name": "Node2","group": 1},{"name": "Node3","group": 1}],
            "links": [{"source": 0,"target": 1,"value": 2},{"source": 0,"target": 2,"value": 2}]};

var width = 960,
height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

force.nodes(json.nodes)
    .links(json.links)
    .start();

var link = svg.selectAll(".link")
    .data(json.links)
    .enter().append("line")
    .attr("class", function(d){ return ["link", d.source.name, d.target.name].join(" "); })
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

// Set up dictionary of neighbors
var node2neighbors = {};
for (var i =0; i < json.nodes.length; i++){
    var name = json.nodes[i].name;
    node2neighbors[name] = json.links.filter(function(d){
            return d.source.name == name || d.target.name == name;
        }).map(function(d){
            return d.source.name == name ? d.target.name : d.source.name;
        });
}

var clickableNodes = ["Node1"];

var nodes = svg.selectAll(".node")
    .data(json.nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("id", function(n){ return n.name; })
    .attr("r", 5)
    .style("fill", function(d) { return color(d.group); })
    .call(force.drag)

nodes.filter(function(n){ return clickableNodes.indexOf(n.name) != -1; })
    .on("click", function(n){
        // Determine if current node's neighbors and their links are visible
        var active   = n.active ? false : true // toggle whether node is active
        , newOpacity = active ? 0 : 1;

        // Extract node's name and the names of its neighbors
        var name     = n.name
        , neighbors  = node2neighbors[name];

        // Hide the neighbors and their links
        for (var i = 0; i < neighbors.length; i++){
            d3.select("circle#" + neighbors[i]).style("opacity", newOpacity);
            d3.selectAll("line." + neighbors[i]).style("opacity", newOpacity);
        }
        // Update whether or not the node is active
        n.active = active;
    });

nodes.append("title")
    .text(function(d) { return d.name; });

force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

    nodes.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
});