2

当连接的节点悬停时，我想突出显示图形的边缘。我从Bundle 示例中获得灵感：

在此处输入图像描述

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

任何帮助表示赞赏。

4

1 回答 1

2

最终我无法重现您的问题！一开始唯一吸引我的是当我在 .on(...) 中设置鼠标悬停和鼠标悬停函数后定义它们时叫。

无论如何，你可以看到我在这里尝试了什么。编码：

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);
});​
于 2012-10-25T20:10:05.373 回答