Javascript 鼠标悬停以显示/隐藏强制布局链接

作为d3（和javascript）的新手，我一直在尝试将强制布局与背景图像相结合。目标是为图像中的每个人创建一个节点，并使用svg链接显示该人与图像中所有其他人的社交关系。我已经使用了《悲惨世界》部队布局的一个子集来测试这一点。 我在部队布局中创建了几个“固定”位置（如阿让、珂赛特、沙威、埃潘妮）

关键问题是大量的互连，这看起来令人印象深刻，但却使其无法呈现。 我想添加一个mouseover函数，它只在鼠标位置显示人物/节点的链接

我已经研究了一种替代机制：Mike Bostock的有这个mouseover功能，但对我来说太复杂了，不幸的是，因为我不需要所有这些地理脚本

.连接线{
行程：#9cf；
笔划不透明度：0.6；
}
.节点圆{
冲程：#fff；
笔划宽度：1.5px；
}
*{字体系列：Arial，无衬线；字体大小：12px；颜色：#fff；}
变量图={
节点：[
{“id”：“Myriel”，“group”：1}，
{“id”：“拿破仑”，“集团”：1}，
{“id”：“Mlle.Baptistine”，“group”：1}，
{“id”：“Mme.Magloire”，“group”：1}，
{“id”：“CountessdeLo”，“group”：1}，
{“id”：“Geborand”，“group”：1}，
{“id”：“Champtercier”，“group”：1}，
{“id”：“Cravatte”，“group”：1}，
{“id”：“Count”，“group”：1}，
{“id”：“OldMan”，“group”：1}，
{“id”：“Labarre”，“group”：2}，
{“id”：“阿让”，“外汇”：1300，“fy”：570，“集团”：2}，
{“id”：“玛格丽特”，“集团”：3}，
{“id”：“Mme.deR”，“group”：2}，
{“id”：“Isabeau”，“group”：2}，
{“id”：“Gervais”，“group”：2}，
{“id”：“Tholomyes”，“group”：3}，
{“id”：“Listolier”，“group”：3}，
{“id”：“Fameuil”，“group”：3}，
{“id”：“Blacheville”，“group”：3}，
{“id”：“收藏夹”，“组”：3}，
{“id”：“Dahlia”，“group”：3}，
{“id”：“Zephine”，“group”：3}，
{“id”：“芳汀”，“集团”：3}，
{“id”：“德纳第夫人”，“集团”：4}，
{“id”：“德纳第”，“集团”：4}，
{“id”：“珂赛特”，“fx”：1245，“fy”：625，“集团”：5}，
{“id”：“沙威”，“外汇”：110，“fy”：450，“集团”：4}，
{“id”：“割风事件”，“组”：0}，
{“id”：“Bamatabois”，“group”：2}，
{“id”：“perpue”，“group”：3}，
{“id”：“Simplice”，“group”：2}，
{“id”：“Scaufflaire”，“group”：2}，
{“id”：“Woman1”，“group”：2}，
{“id”：“Judge”，“group”：2}，
{“id”：“Champmathieu”，“group”：2}，
{“id”：“Brevet”，“group”：2}，
{“id”：“Chenildieu”，“group”：2}，
{“id”：“Cochepaille”，“group”：2}，
{“id”：“彭眉胥”，“集团”：4}，
{“id”：“Boulatruelle”，“group”：6}，
{“id”：“Eponine”，“fx”：535，“fy”：535，“group”：4}，
{“id”：“Anzelma”，“group”：4}，
{“id”：“Woman2”，“group”：5}，
{“id”：“motherinnonce”，“group”：0}，
{“id”：“Gribier”，“group”：0}，
{“id”：“容德雷特”，“集团”：7}，
{“id”：“Mme.Burgon”，“group”：7}，
{“id”：“伽弗洛什”，“集团”：8}，
{“id”：“吉诺曼”，“集团”：5}，
{“id”：“Magnon”，“group”：5}，
{“id”：“Mlle.gillnorman”，“group”：5}，
{“id”：“彭眉胥夫人”，“集团”：5}，
{“id”：“Mlle.Vaubois”，“group”：5}，
{“id”：“吉诺曼中尉”，“集团”：5}，
{“id”：“Marius”，“group”：8}
],
链接：[
{“来源”：“拿破仑”，“目标”：“米里哀”，“价值”：1}，
{“source”：“Mlle.Baptistine”，“target”：“Myriel”，“value”：8}，
{“source”：“Mme.Magloire”，“target”：“Myriel”，“value”：10}，
{“source”：“Mme.Magloire”，“target”：“Mlle.Baptistine”，“value”：6}，
{“source”：“CountessdeLo”，“target”：“Myriel”，“value”：1}，
{“source”：“Geborand”，“target”：“Myriel”，“value”：1}，
{“source”：“Champtercier”，“target”：“Myriel”，“value”：1}，
{“source”：“Cravatte”，“target”：“Myriel”，“value”：1}，
{“source”：“Count”，“target”：“Myriel”，“value”：2}，
{“source”：“OldMan”，“target”：“Myriel”，“value”：1}，
{“来源”：“阿让”，“目标”：“拉巴拉”，“价值”：1}，
{“来源”：“阿让”，“目标”：“马格洛埃夫人”，“价值”：3}，
{“来源”：“冉阿让”，“目标”：“姆勒·巴普蒂斯汀”，“价值”：3}，
{“来源”：“阿让”，“目标”：“米里哀”，“价值”：5}，
{“来源”：“玛格丽特”，“目标”：“阿让”，“价值”：1}，
{“来源”：“德夫人”，“目标”：“阿让”，“价值”：1}，
{“来源”：“伊莎博”，“目标”：“阿让”，“价值”：1}，
{“来源”：“热尔韦”，“目标”：“阿让”，“价值”：1}，
{“source”：“Listolier”，“target”：“Tholomyes”，“value”：4}，
{“source”：“Fameuil”，“target”：“Tholomyes”，“value”：4}，
{“source”：“Fameuil”，“target”：“Listolier”，“value”：4}，
{“source”：“Blacheville”，“target”：“Tholomyes”，“value”：4}，
{“source”：“Blacheville”，“target”：“Listolier”，“value”：4}，
{“source”：“Blacheville”，“target”：“Fameuil”，“value”：4}，
{“source”：“favorite”，“target”：“Tholomyes”，“value”：3}，
{“source”：“favorite”，“target”：“Listolier”，“value”：3}，
{“source”：“Favorite”，“target”：“Fameuil”，“value”：3}，
{“source”：“favorite”，“target”：“Blacheville”，“value”：4}，
{“来源”：“大丽花”，“目标”：“多罗米耶”，“价值”：3}，
{“source”：“Dahlia”，“target”：“Listolier”，“value”：3}，
{“来源”：“大丽花”，“目标”：“法梅尔”，“价值”：3}，
{“source”：“Dahlia”，“target”：“Blacheville”，“value”：3}，
{“source”：“Dahlia”，“target”：“favorite”，“value”：5}，
{“来源”：“泽芬”，“目标”：“多罗米埃”，“价值”：3}，
{“来源”：“Zephine”，“目标”：“Listolier”，“值”：3}，
{“来源”：“泽芬”，“目标”：“法梅尔”，“价值”：3}，
{“来源”：“泽芬”，“目标”：“布拉奇维尔”，“价值”：3}，
{“来源”：“泽芬”，“目标”：“宠儿”，“价值”：4}，
{“来源”：“泽芬”，“目标”：“大丽花”，“价值”：4}，
{“来源”：“芳汀”，“目标”：“多罗米耶”，“价值”：3}，
{“source”：“Fantine”，“target”：“Listolier”，“value”：3}，
{“来源”：“芳汀”，“目标”：“法梅尔”，“价值”：3}，
{“来源”：“芳汀”，“目标”：“布拉奇维尔”，“价值”：3}，
{“来源”：“芳汀”，“目标”：“宠儿”，“瓦尔”
var node = svg.selectAll(".node") //essential to define the nodes
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .on('mouseover',mouseover)
    .on('mouseout',mouseout)
    .call(d3.drag() //enables the dragging function (see further down)
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

function mouseover(d) {
  link.filter(function(e) {  return e.target.id == d.id || e.source.id == d.id; })
    .style('opacity',1)
    .style('stroke','black')
}

function mouseout(d) {
  link.style('stroke', "#9cf")
      .style('stroke-opacity', 0.6);
}