React d3.选择有什么方法可以做到这一点吗

Question

我有一个使用"React-d3-graph"组件的React拓扑图组件，我已经尝试了两周，想知道如何使用d3.select来定位图中的链接，但无法实现。

图形由节点和链接组成。这是HTML输出的层次结构：

<g id="graph-id-graph-container-zoomable">
<path class="link" d="M863.7507753180932,316.33500179175303A0,0 0 0,1 992.9208716852238,461.10776577072073" id="asw-lab9306a - nlab5320a" x1="863.7507753180932" x2="992.9208716852238" y1="316.33500179175303" y2="461.10776577072073" style="stroke-width: 4; stroke: rgb(211, 211, 211); opacity: 1; fill: none;"></path>
      <g class="node" cx="808.331973835234" cy="46.111332777044865" id="192.168.1.71" transform="translate(808.331973835234,46.111332777044865)">
    <path cursor="pointer" opacity="0.2" d="M-10.606601717798213,-10.606601717798213h21.213203435596427v21.213203435596427h-21.213203435596427Z" fill="#57a3ff" stroke="none" stroke-width="1.5"></path>
    <text dx="18" dy=".35em" fill="black" font-size="12" font-weight="bold" opacity="0.2">192.168.1.71</text></g>

在我的组件中，我能够通过以下功能瞄准节点：

nodeSelect(id) {    
  d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g[id='" + id + "']").selectAll("path").attr('fill',"red").attr('opacity',"1");  
}

工作起来很有魅力。然而，在过去的两周里，我尝试了d3.select的每一次迭代，都以链接为目标，但都没有成功。以下是我最近的几项努力：

d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path").attr('opacity',"0.2");
d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path.link").attr('opacity',"0.2");
d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path#asw-lab9306a - nlab5320a").attr('opacity',"0.2");

什么都不管用。这一切都包含在组件的主点击功能中，该功能的编程如下：

   handleClick = (id) => {
    d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container-zoomable").selectAll("g").selectAll("path#asw-lab9306a - nlab5320a").attr('opacity',"0.2");
    }

上面提到的正在工作的节点选择器包含在同一个组件中，正如我所说，它工作得很好。我对此已无计可施，如有任何建议或帮助，我将不胜感激。如果需要更多的代码，我很乐意根据需要修改我的问题。

所以我甚至试过这个。。。

当我点击链接时，源和目标肯定在报告。下面的一位受访者给了我这个代码：

onClickLink = (id) = {
    d3.select("#"+id).attr('opacity',"0.2");
 }

这不起作用，因为当我控制台记录ID时，它只返回源节点名称，而不是HTML代码中列出的完整ID。所以我尝试了这个：

onClickLink = (source, target) = {
    let id = source + "-" + target;
    d3.select("#"+id).attr('opacity',"0.2");
 }

并且我得到了"无法在'Document'上执行'querySelector'：'#80.107.0.217-nlab3328'不是有效的选择器。"我正在查看代码，链接确实有一个ID"80.107.0.217-nlab3328"。

Answer 1

终于解决了这个问题。这是我必须做的。问题是我直接更改了.attr，而不是通过"样式"，即它在代码中的配置方式。以下是有效的代码。。。

onClickLink = (source, target) => {       
   let id = source + "-" + target;      
   d3.select("#"+id).attr('style',"stroke-width: 10; stroke: rgb(0,0,255); opacity: 1; fill: blue;");       

}

感谢所有的回应，我真的很感激！

Answer 2

handleClick = (id) => {
    d3.select("#"+id).attr('opacity',"0.2");
    }

您按id进行选择，因此只能有一个id。

重读有关d3选择的文档。

编辑

选择具有"."的DOM元素的方法在id中。

handler = (source, target) => {
   //var id = "#" + source + "-" + target;
   var id = source + "-" + target;
   var e = document.getElementById(id);
   d3.select(e).style('background-color', 'steelblue');
};
handler('80.107.0.217', 'nlab3328');

<div id="80.107.0.217-nlab3328">Text</div>
<script src="https://d3js.org/d3.v4.min.js"></script>