Events d3js:_on（）u不'；t将当前基准对象发送到onmouse函数

我想在连接的节点悬停时突出显示图形的边。 我的灵感来自：

但是on（）函数没有将d对象赋予onmouse函数：

d3.json("graph_file.json", function(json) {
      force
          .nodes(json.nodes)
          .links(json.links)
          .start();

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

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

---

感谢您的帮助。

最终我无法重现您的问题！一开始唯一让我感到惊讶的是，我在将mouseover和mouseout函数设置为后定义了它们。在（…）上，在这种情况下，它们对于调用是未定义的，并且没有设置鼠标处理程序-因此这些函数根本就没有被调用过

不管怎样，你可以看到我尝试了什么。守则：

var w = 400,
    h = 400;
var vis = d3.select("svg").attr("width", 800).attr("height", 800);

var nodes = [];
var links = [];

for (var i = 0; i < 30; i++) {
    var node = {
        label: "node " + i,
        value: Math.random(),
        key: i
    };
    nodes.push(node);
};

for (var i = 0; i < nodes.length; i++) {
    for (var j = 0; j < i; j++) {
        if (Math.random() > .95) links.push({
            source: nodes[i],
            target: nodes[j],
            weight: Math.random()
        });
    }
};

var force = d3.layout.force().size([w, h]).nodes(nodes).links(links);

force.start();

var link = vis.selectAll("line.link").data(links).enter().append("line").style("stroke", "#CCC").attr("class", function(d) {
    return "link source-" + d.source.key + " target-" + d.target.key;
});

var mouseover = function(d) {
    txt.text(JSON.stringify(d));
    //txt.text("line.link.target-" + d.key);
    vis.selectAll("line.link.target-" + d.key).classed("target", true).style("stroke", '#F00');

    vis.selectAll("line.link.source-" + d.key).classed("source", true).style("stroke", '#F00');
}


var mouseout = function(d) {
    vis.selectAll("line.link.target-" + d.key).classed("target", false).style("stroke", "#CCC");

    vis.selectAll("line.link.source-" + d.key).classed("source", false).style("stroke", "#CCC");
}


var node = vis.selectAll("circle.node").data(force.nodes()).enter().append("circle").attr("class", "node").attr("r", 5).style("fill", function(d) {
    return d3.rgb(55 * d.value, 255 * d.value, 155 * d.value)
}).style("stroke", "#FFF").style("stroke-width", 3).on("mouseover", mouseover).on("mouseout", mouseout).call(force.drag);

var txt = vis.append('text').attr({
    transform: 'translate(5,400)'
}).text("Node Info");


var updateLink = function() {
    this.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;
    });
}

var updateNode = function() {
    this.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

force.on("tick", function() {
    node.call(updateNode);
    link.call(updateLink);
});​

var w=400，
h=400；
var vis=d3。选择（“svg”）.attr（“宽度”，800）。attr（“高度”，800）；
var节点=[]；
var-links=[]；
对于（变量i=0；i<30；i++）{
变量节点={
标签：“节点”+i，
值：Math.random（），
关键：我
};
nodes.push（节点）；
};
对于（var i=0；i.95）links.push({
来源：节点[i]，
目标：节点[j]，
权重：Math.random（）
});
}
};
var-force=d3.layout.force（）.size（[w，h]）。节点（nodes）。链接（links）；
force.start（）；
var link=vis.selectAll（“line.link”）.data（links）.enter（）.append（“line”）.style（“stroke”，“#CCC”）.attr（“class”，function（d）{
返回“链接源-”+d.source.key+“目标-”+d.target.key；
});
var mouseover=函数（d）{
txt.text（JSON.stringify（d））；
//text（“line.link.target-”+d.key）；
vis.selectAll（“line.link.target-”+d.key）。classed（“target”，true）。style（“stroke”，“#F00”）；
vis.selectAll（“line.link.source-”+d.key）。classed（“source”，true）。style（“stroke”，“#F00”）；
}
var mouseout=函数（d）{
vis.selectAll（“line.link.target-”+d.key）。classed（“target”，false）。style（“stroke”，“#CCC”）；
vis.selectAll（“line.link.source-”+d.key）。classed（“source”，false）。style（“stroke”，“#CCC”）；
}
var node=vis.selectAll（“circle.node”）.data（force.nodes（））.enter（）.append（“circle”）.attr（“class”，“node”）.attr（“r”，5）.style（“fill”，function（d）{
返回d3.rgb（55*d.value，255*d.value，155*d.value）
}).style（“stroke”，“#FFF”）.style（“stroke width”，3）、on（“mouseover”，mouseover）、on（“mouseout”，mouseout）、call（强制拖动）；
var txt=vis.append（'text'）.attr({
变换：“translate（5400）”
}).文本（“节点信息”）；
var updateLink=函数（）{
这个.attr（“x1”，函数（d）{
返回d.source.x；
}).attr（“y1”，函数（d）{
返回d.source.y；
}).attr（“x2”，函数（d）{
返回d.target.x；
}).attr（“y2”，功能（d）{
返回d.target.y；
});
}
var updateNode=函数（）{
this.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
}
force.on（“勾号”，函数（）{
node.call（updateNode）；
link.call（updateLink）；
});​

是否向鼠标悬停功能传递了任何内容？还是id d未定义？非常感谢这个详细的示例，我成功地做到了我想要的。除了，如何使节点标签出现时，悬停…我只是注意到我双重分类的链接…哎呀。您应该能够添加与添加节点类似的文本（只需向翻译添加偏移量），但将文本分类更像节点。然后，可以按照在链接线上设置颜色的方式设置它们的可见性。

var w = 400,
    h = 400;
var vis = d3.select("svg").attr("width", 800).attr("height", 800);

var nodes = [];
var links = [];

for (var i = 0; i < 30; i++) {
    var node = {
        label: "node " + i,
        value: Math.random(),
        key: i
    };
    nodes.push(node);
};

for (var i = 0; i < nodes.length; i++) {
    for (var j = 0; j < i; j++) {
        if (Math.random() > .95) links.push({
            source: nodes[i],
            target: nodes[j],
            weight: Math.random()
        });
    }
};

var force = d3.layout.force().size([w, h]).nodes(nodes).links(links);

force.start();

var link = vis.selectAll("line.link").data(links).enter().append("line").style("stroke", "#CCC").attr("class", function(d) {
    return "link source-" + d.source.key + " target-" + d.target.key;
});

var mouseover = function(d) {
    txt.text(JSON.stringify(d));
    //txt.text("line.link.target-" + d.key);
    vis.selectAll("line.link.target-" + d.key).classed("target", true).style("stroke", '#F00');

    vis.selectAll("line.link.source-" + d.key).classed("source", true).style("stroke", '#F00');
}


var mouseout = function(d) {
    vis.selectAll("line.link.target-" + d.key).classed("target", false).style("stroke", "#CCC");

    vis.selectAll("line.link.source-" + d.key).classed("source", false).style("stroke", "#CCC");
}


var node = vis.selectAll("circle.node").data(force.nodes()).enter().append("circle").attr("class", "node").attr("r", 5).style("fill", function(d) {
    return d3.rgb(55 * d.value, 255 * d.value, 155 * d.value)
}).style("stroke", "#FFF").style("stroke-width", 3).on("mouseover", mouseover).on("mouseout", mouseout).call(force.drag);

var txt = vis.append('text').attr({
    transform: 'translate(5,400)'
}).text("Node Info");


var updateLink = function() {
    this.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;
    });
}

var updateNode = function() {
    this.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

force.on("tick", function() {
    node.call(updateNode);
    link.call(updateLink);
});​