如何在保留红色线条的同时移除D3.js路径上的黑色线条？

我需要修改以下D3.js代码，让图表只保留红色线条、移除黑色线条，目前的图表效果如图所示。我试过网上搜索、咨询ChatGPT并修改代码片段，但都没解决问题。

当前效果截图：

原代码 #

<script>
    var nodeData = [
        {id: "Midwives",       position: [100, 25],   parentPosition: [100, 25] },
        {id: "Nurses",   position: [25, 175],   parentPosition: [100, 25] },
        {id: "More Nurses",   position: [175, 175],  parentPosition: [100, 25] }];

     
    //Link generator with .source and .target set
    var link = d3.linkVertical()
        .source(d => d.parentPosition)
        .target(d => d.position)

    //Creating path elements by adding in our data and calling link
    d3.select("#demoSrcTar")
        .selectAll("path")
        .data(nodeData)
        .join("path")
        .attr("d", link)
        .style('opacity', 0.5)
        //.classed("link", true)
        .attr("stroke", "red")
        .attr("stroke-width", 5)
        .transition().duration(2000).attr("stroke", "red");
</script>

问题分析与解决方案 #

黑色线条出现的核心原因是第一个数据项Midwives的起点和终点坐标完全相同，生成了一个零长度的路径元素，虽肉眼看不到完整线条，但浏览器可能渲染出黑色小点（或受全局CSS默认样式影响显示为黑色）；另外若容器内之前存在未清理的path元素，也会残留黑色线条。

修改方案：

1. 过滤掉起点与终点坐标一致的数据，避免生成无效路径
2. 确保容器内旧的path元素被完全替换或清空

修改后的代码 #

<script>
    var nodeData = [
        {id: "Midwives",       position: [100, 25],   parentPosition: [100, 25] },
        {id: "Nurses",   position: [25, 175],   parentPosition: [100, 25] },
        {id: "More Nurses",   position: [175, 175],  parentPosition: [100, 25] }];

    // 过滤掉起点终点重合的数据
    var validLinkData = nodeData.filter(d => {
        return d.position[0] !== d.parentPosition[0] || d.position[1] !== d.parentPosition[1];
    });

    //Link generator with .source and .target set
    var link = d3.linkVertical()
        .source(d => d.parentPosition)
        .target(d => d.position)

    //Creating path elements by adding in our data and calling link
    d3.select("#demoSrcTar")
        .selectAll("path")
        .data(validLinkData) // 使用过滤后的数据
        .join("path")
        .attr("d", link)
        .style('opacity', 0.5)
        .attr("stroke", "red")
        .attr("stroke-width", 5)
        .transition().duration(2000).attr("stroke", "red");
</script>

如果修改后仍有黑色线条，可在绑定数据前先清空容器内的所有path元素，添加一行：

d3.select("#demoSrcTar").selectAll("path").remove();

内容的提问来源于stack exchange，提问作者COOKIES