D3.js d3-轴标签转换

在Mike Bostock的立体主义演示（）中，有一个光标，可以显示所有显示的地平线图的值。此外，光标文本显示时间轴的时间点。当光标文本遮挡轴标签时，标签将淡入淡出状态

我正在使用d3.js制作一个类似的显示器（但不是立体主义）。除了那一部分，我都在工作。我在开发者的窗口中搜索了CSS，搜索了源代码（尽我所能），但我不明白用什么样的魔法来完成这一壮举。我甚至看过这么多“轴标签转换”的问题，但我没有把xaxis标签转换上的点连接起来

当被文本遮挡时，这种淡入/淡出是如何发生的

更新： 我想我找到了发生这种情况的事件脚本区域——目前只是有点过头了——有人能帮我解释这个事件监听器在做什么吗？具体来说，在下面else子句中的第二个g.selectAll中，此处使用了哪些数据（d）？引发此事件的原因是什么

这是显示器最酷的部分（地平线图表之外），我很想弄明白这一点

context.on("focus.axis-" + id, function(i) {
      if (tick) {
        if (i == null) {
          tick.style("display", "none");
          g.selectAll("text").style("fill-opacity", null);
        } else {
          tick.style("display", null).attr("x", i).text(format(scale.invert(i)));
          var dx = tick.node().getComputedTextLength() + 6;
          g.selectAll("text").style("fill-opacity", function(d) { return Math.abs(scale(d) - i) < dx ? 0 : 1; });
        }
      }
    });

context.on（“焦点轴-”+id，函数（i）{
如果（勾选）{
如果（i==null）{
勾选样式（“显示”、“无”）；
g、 选择全部（“文本”）。样式（“填充不透明度”，空）；
}否则{
勾选.style（“display”，null）.attr（“x”，i）.text（格式（scale.invert（i））；
var dx=tick.node（）.getComputedTextLength（）+6；
g、 选择all（“text”）.style（“填充不透明度”，函数（d）{return Math.abs（scale（d）-i）

我将此作为参考，以实现相同的效果

我不确定上下文变量是什么，id是如何设置的，或者tick标志引用了什么，但我所做的只是根据tick与鼠标的距离来更新其不透明度。这样，垂直记号和标签文本都会淡出

  svg.selectAll('.x.axis .tick').style('opacity', function (d) {
    return Math.min(1, (Math.round(Math.abs(d3.mouse(svg.node())[0] - x(d))) - 10) / 15.0);
  });

这样，如果不透明度在10像素以内，则不透明度设置为0，并在10到25之间从1-0淡入。在25以上，不透明度将设置为越来越大的数字，因此我使用Math.min函数将其钳制为1.0

---

我的标签稍微旋转了一下，所以我还添加了一个上面公式中没有显示的偏移量（在[0]后面加上a+3），只是为了让它看起来更好。迟了一年才回答你唯一的问题，不过效果不错。

答案与Kevin Branigan的帖子相同，但使用d3比例计算不透明度值

var tickFadeScale = d3.scale.linear().domain([10,15]).range([0,1]).clamp(true);
svg.selectAll('.x.axis .tick').style('opacity', function (d) {
 return tickFadeScale(Math.abs(d3.mouse(svg.node())[0] - x(d)));
}

---

我只是检查了你说的话，我不知道我以前怎么没有注意到。不管怎样，这让我感觉好一点。。。谢谢。好的，我找到了线索。。。使用上面编辑的更新。