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

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

您通过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>

Answer 2

最终弄清楚了这一点。这就是我要做的。问题是我直接更改.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;");

}

感谢所有答复，我非常感谢！

React d3.Select有没有办法做到这一点？

2 个答案: