2

在 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; });
        }
      }
    });
4

2 回答 2

0

与 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)));
}
于 2015-01-30T16:49:28.750 回答
0

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

我不确定上下文变量是什么或 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。最小功能。

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

于 2014-07-10T17:30:01.303 回答