javascript - D3 鼠标悬停

Question

我使用 D3 库在 svg 容器内附加了圆圈和线条。当我将鼠标悬停在附加的圆圈上或将鼠标悬停在附加的圆圈上时，如何使线条出现或消失。 这是代码:

     var machine_circles = svgContainer.selectAll('circle')
                      .data(machine_nodes)
                      .enter()
                      .append("circle");

     var machine_circleAttributes = machine_circles
                   .attr("cx", function (d) { return d.x_axis; })
                   .attr("cy", function (d) { return d.y_axis; })
                   .attr("r", function (d) { return d.radius; })
                   .attr("fill", 'url(#bg)')

 svgContainer
 .selectAll("line")
.data(links)
.enter().append("line").attr("class", "hover-line")
.style("stroke", "black")
.attr("class", "link")
.attr("x1", function(d){if(d.tool_name === 'Error') {return 0} else {return connect_machine( d.machine_name )[0]}})
.attr("y1", function(d){if(d.tool_name === 'Error') {return 0} else {return connect_machine( d.machine_name )[1]}})
.attr("x2", function(d){if(d.tool_name === 'Error') {return 0} else {return connect_tool( d.tool_name )[0]}})
.attr("y2", function(d){if(d.tool_name === 'Error') {return 0} else {return connect_tool( d.tool_name )[1]}})
.style("stroke-width", 1)
;    

Answer 1

你没有在这里指定链接。好的，我在这里指定链接是一个一般的例子

var link = canvas.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', '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; });

现在为附加的圆圈添加鼠标悬停功能

machineCircles.on("mouseover", function(d) {
          link.style("visibility", "hidden");
        }