查看 d3noob 的这个块。
http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a
它最初是为日期格式的 x 轴设计的。而我的 x 轴和 y 轴都是线性的。我想做的是使用此工具提示样式来绘制带有趋势线的线性 x/线性 y 散点图。我希望这种工具提示/十字准线随着趋势线在我的图表中上升而沿着 x 轴值移动,就像上面块中的图表一样。实际上,在他的博客上,有人问了类似的问题,如何使其适用于序数尺度,但他回答说“这是未知的领域”。
所以我心想,哦,这并没有那么难。那是在我仔细查看代码之前,也是在我花几个小时调整这个那个之前。所以我现在对这件事有了更健康的尊重,它并不像看起来那么容易。
我认为将其更改为线性比例最复杂的部分如下:
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
有人可以发布在线性缩放 x 轴内工作的此工具提示块吗?我很想看看你是怎么做到的。我尝试了很多东西(徒劳),甚至是中点公式哈哈。事后看来,我意识到这是一个愚蠢的想法,但我真的对如何理解代码感到茫然。
任何图表都可以,只要它使用该工具提示即可。
感谢十亿,
仅供参考,我知道让某人为此创建要点/块可能是一项艰巨的任务,但我相信拥有一个功能示例块可以接触到许多人并让他们通过示例进行学习。此外,线性比例尺非常受欢迎,并且让此工具提示/十字线系统适用于此类比例尺将是社区的一个很好的补充。
你的意思是这样的吗?https://jsfiddle.net/gerardofurtado/ayta89cz/5/ https://jsfiddle.net/gerardofurtado/ayta89cz/5/
在这个小提琴中我只是使用d3.mouse()
获取鼠标在透明矩形上的位置,并使用两条虚线作为十字线。您可以轻松地将这些值转换为相对的 x 尺度和 y 尺度值。我在这里对数学进行了硬编码,因为我知道刚刚创建的趋势线的斜率,但您必须根据趋势线修改数学。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)