D3J使用MouseOver在节点中与文本进行交互

Question

我正在修改以下可缩放圆形包装示例

我面临的问题是我正在使用的JSON包含许多具有长文本线的字段。这驱动了每个节点的标签与近一个标签重叠的情况。

我在两个选择中思考：*旋转文本45º*默认隐藏标签并使用鼠标函数在必要时显示

我可以根据数据与节点的颜色进行交互，但是我失败了与文本特征互动以旋转或隐藏|在节点内显示文本。

任何人都可以指向我正确的方向吗？

这是我的测试代码，可以在鼠标结束后隐藏节点的文本（一旦完成，我将做相反的事情，默认情况下隐藏并在鼠标结束时可见）：

 var text = svg.selectAll("text")
  .data(nodes)
  .enter().append("text")
  .attr("class", "label")
  .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
  .text(function(d) { return d.name; })
  .on("mouseover", function(){d3.select(this).style("visibility", "hidden");});

感谢您的评论@Jkhan，我尝试了这两种代码而没有成功。（什么都没发生）

这个用于鼠标的：

 var widthThreshold = 100;
 var text = svg.selectAll("text")
  .data(nodes)
  .enter().append("text")
  .attr("class", "label")
  .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
  .text(function(d) { return d.name; })
  .select('text')
  .attr('opacity', function(d){
    return this.getBBox().width > widthThreshold ? .001 : 1;
  })
  .on('mouseover', function(){
    d3.select(this).attr('opacity', 1);
  })
  .on('mouseout', function(){
    d3.select(this).attr('opacity', function(){
       return this.getBBox().width > widthThreshold ? .001 : 1;
    });
  });

和旋转的一个：

 var widthThreshold = 100;
 var text = svg.selectAll("text")
  .data(nodes)
  .enter().append("text")
  .attr("class", "label")
  .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
  .text(function(d) { return d.name; })
  .select('text')
  .attr('transform', function(d){
    return this.getBBox().width > widthThreshold ? 'rotate(90)' : '';
  });

Answer 1

旋转，您应该能够使用变换属性：

var widthThreshold = 100;
relevantSelection
    .select('text')
    .attr('transform', function(d){
        return this.getBBox().width > widthThreshold ? 'rotate(90)' : '';
    });

我认为您已经在正确的轨道上进行鼠标播放/隐藏：

relevantSelection
    .select('text')
    .attr('opacity', function(d){
        return this.getBBox().width > widthThreshold ? .001 : 1;
    })
    .on('mouseover', function(){
        d3.select(this).attr('opacity', 1);
    })   
    .on('mouseout', function(){
        d3.select(this).attr('opacity', function(){
           return this.getBBox().width > widthThreshold ? .001 : 1;
        });
    });

Answer 2

最后，我使它起作用，从：

中修改指针 - 事件参数

.label,
.node--root,
.node--leaf {
 pointer-events: none;
}

to

.label,
.node--root,
.node--leaf {
  pointer-events: all;
}