将悬停互动添加到D3网络中

Question

我是D3的新手，经验不足，他是从JSON文件构建网络的，下面附有代码：

<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//svg canvas
var svgCanvas = d3.select("svg")
.attr("width", 1000)
.attr("height", 650)
.attr("class", "svgCanvas");

var data =  d3.json("data.json", function(error, data) {
    console.log(data);

data.links.forEach(function(d) {
var node1 = data.nodes.find(function(e) {
  return e.id === d.node01
});
var node2 = data.nodes.find(function(e) {
  return e.id === d.node02
});
d.x1 = node1.x;
d.x2 = node2.x;
d.y1 = node1.y;
d.y2 = node2.y;
})


// links
svgCanvas.selectAll("line")
.data(data.links)
.enter()
.append("line")

.attr("x1", function(d) {
  return d.x1;
})
.attr("y1", function(d) {
  return d.y1;
})
.attr("x2", function(d) {
  return d.x2;
})
.attr("y2", function(d) {
  return d.y2;
})
.style("stroke", "#aaa")
.attr("stroke-width", function(d) {return d.amount / 150;})      


 // nodes
svgCanvas.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("r", function(d) {return 10;})
.attr("cx", function(d) {
  return d.x;
})
.attr("cy", function(d) {
  return d.y;
})

.style("fill", "#69b3a2")


var text = svgCanvas.append("g")
.attr("class", "labels")
.selectAll("text")
.data(data.nodes)
.enter().append("text")
.attr("dx", function(d) {return d.x + 15;})
.attr("dy", function(d) {return d.y;})

.text(function(d) { return d.id });

  })

</script>

到目前为止，我已经能够将节点显示为圆形，并在节点之间创建线，其权重是进入该节点的数量的乘积。

我现在想将以下2种互动添加到我的网络中，但是我不确定该怎么做：

1. 将鼠标悬停在一个圆上，因此它将突出显示该圆和与其相连的所有线（通过使其他圆和线透明）。

2. 将鼠标悬停在一个圆圈上，因此会显示工具提示，其中包含有关该位置的交易总额和关联位置的数量的信息。

供参考，JSON数据如下所示：

{
 "nodes": [
{
  "id": "site09",
  "x": 317.5,
  "y": 282.5
},
{
  "id": "site01",
  "x": 112,
  "y": 47
},
{
  "id": "site03",
  "x": 69.5,
  "y": 287
},
{
  "id": "site04",
  "x": 424.5,
  "y": 99.5
},
{
  "id": "site05",
  "x": 432,
  "y": 467
},
{
  "id": "site11",
  "x": 567,
  "y": 482
},
{
  "id": "site08",
  "x": 592,
  "y": 164.5
},
{
  "id": "site10",
  "x": 782,
  "y": 397
},
{
  "id": "site06",
  "x": 829.5,
  "y": 262
},
{
  "id": "site07",
  "x": 902,
  "y": 169.5
},
{
  "id": "site02",
  "x": 682,
  "y": 182
}
],
"links": [
{"node01": "site05", "node02": "site08", "amount": 10},
{"node01": "site05", "node02": "site02", "amount": 120},
{"node01": "site05", "node02": "site03", "amount": 50},
{"node01": "site05", "node02": "site07", "amount": 80},
{"node01": "site05", "node02": "site09", "amount": 210},
{"node01": "site05", "node02": "site10", "amount": 350},

{"node01": "site02", "node02": "site03", "amount": 1000},
{"node01": "site02", "node02": "site04", "amount": 50},
{"node01": "site02", "node02": "site08", "amount": 70},
{"node01": "site02", "node02": "site09", "amount": 80},

{"node01": "site08", "node02": "site06", "amount": 120},
{"node01": "site08", "node02": "site07", "amount": 110},
{"node01": "site08", "node02": "site09", "amount": 160},
{"node01": "site08", "node02": "site10", "amount": 130},
{"node01": "site08", "node02": "site04", "amount": 140},

{"node01": "site04", "node02": "site01", "amount": 50},
{"node01": "site04", "node02": "site05", "amount": 200},
{"node01": "site04", "node02": "site07", "amount": 210},
{"node01": "site04", "node02": "site09", "amount": 220},
{"node01": "site04", "node02": "site10", "amount": 190},

{"node01": "site01", "node02": "site06", "amount": 170},
{"node01": "site01", "node02": "site07", "amount": 190},
{"node01": "site01", "node02": "site08", "amount": 20},
{"node01": "site01", "node02": "site09", "amount": 130},
{"node01": "site01", "node02": "site10", "amount": 140},

{"node01": "site06", "node02": "site02", "amount": 80},
{"node01": "site06", "node02": "site07", "amount": 710},
{"node01": "site06", "node02": "site04", "amount": 450},
{"node01": "site06", "node02": "site09", "amount": 50},
{"node01": "site06", "node02": "site10", "amount": 80},

{"node01": "site07", "node02": "site11", "amount": 100},
{"node01": "site08", "node02": "site11", "amount": 220},
{"node01": "site09", "node02": "site11", "amount": 210},
{"node01": "site10", "node02": "site11", "amount": 340},
{"node01": "site05", "node02": "site11", "amount": 190}
]
 }

将不胜感激，到目前为止，我已经尝试过类似的方法，但是它不起作用：

nodes.on('mouseover', function(d) {
link.style('stroke-width', function(l) {
if (d === l.source || d === l.target)
  return 4;
else
  return 2;
});
});

// Set the stroke width back to normal when mouse leaves the node.
nodes.on('mouseout', function() {
link.style('stroke-width', 2);
});

Answer 1

要添加鼠标交互，请在上述任何d3选项中添加一个侦听器。示例：

svgCanvas.selectAll("circle")
  ...
  ...

  .on("mouseover", handleMouseOver)
  .on("mouseout", handleMouseOut)

并定义功能：

function handleMouseOver() {
  d3.select(this)
    .transition().duration(300)
    .attr('fill', 'red')
    .attr('r', 20);
 }

 function handleMouseOut(d, i) {
   // d gives you access to current value, i is index
   d3.select(this)
     .transition().duration(300)
     .attr('fill', '#69b3a2')
     .attr('r', 10);
 }

查看here。