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");
        }

鼠标悬停在D3上

1 个答案: