d3 - 轴标签转换

在Mike Bostock的立体主义演示（http://bost.ocks.org/mike/cubism/intro/demo-stocks.html）中，有一个光标可以显示所有水平图的值。此外，光标文本显示时间轴上的时间点。由于光标文字遮盖了一个轴标签，因此标签会消失。d3 - 轴标签转换

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

来源

2013-07-20 Shell Haffner

没有任何人的帮助？ –

我刚刚检查了你在说什么，我不知道我以前没有注意到它。 – nevermind

无论如何，让我感觉好一点...谢谢。 –

我用这个作为参考，以达到相同的效果。

我不确定上下文变量是什么，或者如何设置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); 
    });

这样，不透明度设置为0，如果是在10个像素，并且从淡化1-0 10和25以上25之间，不透明度将被设置为日益庞大的数字，所以我钳它使用Math.min函数为1.0。

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

来源

2014-07-10 17:30:01

与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-30 16:49:28

d3 - 轴标签转换

回答

相关问题