Question

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

Answer 1

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

我不确定上下文变量是什么，id是如何设置的，或者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以上，不透明度将设置为越来越大的数字，因此我将其限制为1.0 Math.min函数。

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

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

d3 - 轴标签转换

2 个答案: