Question

当连接的节点悬停时，我想突出显示图形的边缘。我从Bundle example：

中汲取灵感

enter image description here

然而，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);

...

        function mouseover(d) {
      svg.selectAll("line.link.target-" + d.key)
          .classed("target", true);


      svg.selectAll("line.link.source-" + d.key)
          .classed("source", true);
    }

任何帮助表示感谢。

Answer 1

最终我无法重现你的问题！一开始就抓住了我的唯一一件事就是当我在设置它们之后定义了鼠标悬停和鼠标输出功能.on（...）在这种情况下，它们未被定义用于调用并且没有设置鼠标处理程序 - 所以函数根本就没有调用。

无论如何，你可以看到我试过的here。代码：

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);
});

d3js：_on（）_不会将当前的基准对象发送到onmouse函数

1 个答案: