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

对于旋转，您应该能够使用transform属性：

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

到

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

d3js使用鼠标悬停

2 个答案: