d3 - 轴标签过渡答案

【问题标题】：d3 - Axis Label Transitiond3 - 轴标签过渡
【发布时间】：2013-07-19 10:27:27
【问题描述】：

在 Mike Bostock 的立体主义演示 (http://bost.ocks.org/mike/cubism/intro/demo-stocks.html) 中，有一个光标显示所有水平线图表的值。此外，光标文本显示时间轴时间点。当光标文本遮住轴标签时，标签会消失。

我正在使用 d3.js（但不是立体主义）制作类似的显示器。除了淡入淡出部分，我所有的工作都完成了。我已经在开发人员窗口中搜索了 CSS，搜索了源代码（尽我所能），但我不明白使用什么魔法来完成这一壮举。我什至浏览过 SO“轴标签转换”问题，但我未能连接 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; });
        }
      }
    });

【问题讨论】：

我刚查了一下你说的，不知道以前怎么没注意。
反正让我感觉好一点……谢谢。
OK 找到了线索……上面编辑过的更新。

标签： d3.js transition axis-labels cubism.js

【解决方案1】：

我用这个作为参考来达到同样的效果。

我不确定上下文变量是什么或如何设置 id 或刻度标志引用什么，但我所做的只是根据刻度与鼠标的接近程度更新刻度的不透明度。这样，垂直刻度以及标签文本都会消失。

  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 时，不透明度将设置为越来越大的数字，因此我将其限制为 1.0 使用Math.min 函数。

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

【讨论】：

【解决方案2】：

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

【讨论】：