2

设想：

在将鼠标悬停在特定节点上时，我试图通过更改不透明度来突出显示该节点及其所有互连节点，并且所有其他节点都应该模糊。

期望：鼠标悬停在节点上时，该节点及其所有互连节点的不透明度应为 1，而其他节点应使用较小的不透明度进行模糊。

现有功能：当我第一次将鼠标悬停在任何节点上时，它无法按预期工作。但从第二次开始它工作正常。

请参考 jsfiddle：jsfiddle

var nodeElements =  g.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 60)

  .attr("stroke", "#fff")
  .attr('stroke-width', 21)
  .attr("id", function(d) { return d.id })
   //.attr("fill", function(d) {return color(d.id)}) 
     .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
     .on('contextmenu', function(d){ 
        d3.event.preventDefault();
        menu(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1]);
    })
      .on('mouseover', selectNode)
      .on('mouseout', releaseNode)
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));


function selectNode(selectedNode) {
  var neighbors = getNeighbors(selectedNode)
        nodeElements.transition().duration(500)
        .attr('opacity', function(node) {
        return setOpacity(node,neighbors, selectedNode);
   })
   .attr('r', function(node) {
        return getNodeRadius(node,neighbors);
   });
   nodeElements.attr('fill', function(node) {
        // send selectedNode to your getNodeColor
        return getNodeColor(node,neighbors,selectedNode);
    })
   textElements.style('font-size', function(node) {
    return getTextColor(node, neighbors)
  })
  textElements.attr('opacity', function(node) {
        return setOpacity(node,neighbors, selectedNode);
   })

  linkElements.style('stroke', function(link) {
    return getLinkColor(selectedNode, link)
  })
}

function releaseNode() {
nodeElements
.attr('r', 60)
.attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
 .attr('opacity', 1);

linkElements.style('stroke', 'grey');
textElements.attr('opacity','1');
}



 function setOpacity(node, neighbors, selectedNode) {
        if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
            return 1;
        } else {
            return 0.3;
        }
    }
4

1 回答 1

3

解决方案非常简单：不要使用attr设置不透明度，style而是使用：

nodeElements.transition()
    .duration(500)
    .style('opacity', function(node) {
        return setOpacity(node,neighbors, selectedNode);
    })

以下是仅进行该更改的代码：https ://jsfiddle.net/uye24zjn/

解释

解释有点复杂。首先，请记住，您从未设置过任何以前的不透明度，无论是使用attr还是style.

当您转换不透明度时，D3 使用 getter 来检索原始值，并应用相应的方法（attr或style）。问题来了：因为您从未使用该方法设置任何不透明度，所以使用作为 getterattr的先前值是. 但是，使用，值为：attrnullstyle1

const circle = d3.select("g")
  .append("circle")
  .attr("r", 50);

console.log("The opacity value using 'attr' as a getter is: " + circle.attr("opacity"))
console.log("The opacity value using 'style' as a getter is: " + circle.style("opacity"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <g transform="translate(150,75)"></g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

结果是 D3 将尝试从null(零) 过渡到1，并且您会看到圆圈在过渡开始时消失。作为演示，将鼠标悬停在圆圈上：

const circle = d3.select("g")
  .append("circle")
  .attr("r", 50);

circle.on("mouseover", function() {
  d3.select(this).transition()
    .duration(1000)
    .attr("opacity", function() {
      return 1
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <g transform="translate(150,75)"></g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

该问题仅在第一次鼠标悬停时发生（就像您的代码一样），因为在将鼠标悬停在圆圈上之后，不透明度被设置为属性，并且null当attr用作吸气剂时将不再有。

作为一般规则，用于attr设置属性，并用于style设置样式。换句话说：用于style设置您将使用 CSS 文件执行的任何操作。

于 2019-12-02T09:31:10.163 回答