Javascript JS/d3.JS：突出显示相邻链接的步骤

你好

我之前对这个项目的问题是：

我不熟悉d3.js，尤其是在数据操作和节点图领域。。我想问几个关于创建节点图的数据操作的问题。在执行我的项目时，我遇到了几个问题，导致了几个问题：

1） 源值和目标值必须是唯一的吗

如果源/目标值不唯一，链接是否有效

2） 高亮显示/更改连接到当前选定节点的链接属性的方法

到目前为止，我只能使用以下方法更改当前节点的属性：

var simulation = d3.forceSimulation(graphData)
.force("charge", d3.forceManyBody().strength(-300))
.force("link", d3.forceLink().id(function(d) { return d[idSel]; }).distance(70))
.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.on("tick", ticked);

var g = svg.append("g"),
    link = g.append("g").attr("stroke-width", 1.5).selectAll(".link"),
    node = g.append("g").attr("stroke-width", 1.5).selectAll(".node");

simulation.nodes(graphData);
simulation.force("link").links(links);

link = link
    .data(links)
    .enter().append("line")
    .attr("class", "link");
    node = node
    .data(graphData)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 6)
    .style("fill", function(d, i) { return colors(d[idSel]); })
    .on("click", function (d, i, l) {

        //Node Effect - Change only selected node's size        
        d3.selectAll(".node").attr("r", 6);
        d3.select(this).attr("r", 12);

        //Link Effect - Highlight adjacent Links
        ... Need help here ...

    });

function ticked() 
{
    link.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; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}   

我从以下方面获得了模拟示例： 然而，我也明白这是低效的，但鉴于我对d3的知识有限，我没有其他方法来做

• 有没有一个好的例子可以让我学习如何突出显示链接
• 此外，我发现我必须使用：
  函数重新启动（） { node.exit（）.remove（）； link.exit（）.remove（）； 模拟。节点（节点）； 模拟。力（“链接”）。链接（链接）； simulation.alpha（1.restart（）； }

若要重新启动模拟，否则任何错误都将导致程序无法计算x/y值。但是，当我将此代码实现为重启函数时，新创建的节点不再具有x/y值。。我做错什么了吗

---

很抱歉问了这么模糊的问题。。非常感谢您的指导。非常感谢社区！：）

仅回答有关如何突出显示链接的问题（因为您没有提供

链接

数组，以下是基于您的回答）：

此代码的作用是什么？

首先，我们获取单击节点的id：

var thisNode = d.id

然后，我们扫描链接以查看源或目标是否具有相同的id：

(d.source.id == thisNode || d.target.id == thisNode)

如果这是真的，我们使用三元运算符设置不透明度：

(condition) ? 1 : 0.1

这是演示，单击节点：

var节点=[{
“id”：“红色”，
“值”：“1”
}, {
“id”：“橙色”，
“值”：“2”
}, {
“id”：“黄色”，
“值”：“3”
}, {
“id”：“绿色”，
“值”：“1”
}, {
“id”：“蓝色”，
“值”：“1”
}, {
“id”：“violet”，
“值”：“3”
},{
“id”：“白色”，
“值”：“1”
},{
“id”：“灰色”，
“值”：“1”
},{
“id”：“teal”，
“值”：“3”
}
];
var-links=[]；
对于（var i=0；i

---

一条建议：在S.O.这里，每个帖子问一个问题。如果你一次问太多的问题，不仅回答起来很复杂，而且人们会认为（他们是对的！）你希望我们免费编写代码。好的，我将改变问题：）谢谢你的建议！你可以发布几个单独的问题。。。毕竟，它是免费的！谢谢你回答我的第一个问题：）慢慢学习如何创建基本数据可视化哈哈..为了向你展示如何突出显示链接，我们需要看看链接数组的外观以及链接是如何创建的（路径？线？）。非常抱歉！！我以为你指的是链接的代码。。我的错。。再次感谢您的帮助！！：）不用担心，我指的是

链接

数组，因为这段代码使用属性

id

。如果你的链接数组是数字数组，那就不行了。是的，经过一些调整后，设法得到了它：）不知道对于链接和节点，函数（d）返回不同的数据。。我每天都在学习新东西：）谢谢@BenjiTan可以自由发布另一个问题，关于如何删除/合并重复链接。当然！谢谢你的帮助！祝你新年快乐！我刚和家人休息一会儿，回去工作：）大学下周开始上课：P

(condition) ? 1 : 0.1