visualization - 如何在d3.js中创建 “slopegraph”

Question

在定量信息的可视显示中，爱德华·塔夫特(Edward Tufte)创造了一个术语“坡度图”，用于表示非常少量的图表(more information)。权威示例如下所示:

野外的d3.js中至少有两种坡度图的实现:

http://markmarkoh.com/tuftes-slope-graphs-in-svg-using-d3js/

http://skedasis.com/d3/slopegraph/

我尝试了一个更具声明性的实现，并且在两列中的值之间都保留了100％的对应关系，但是被卡住了。不出所料，当具有相似或相同值的项目出现在数据集中时，图形会重叠并且图表不可读。

naïve version( source)使用 linear比例来计算水平位置，而 attempt to “normalize” the positions( source)使用 ordinal比例。

我相信使用序数比例尺(基于重叠项的坐标来计算偏移量)可以获得更好的结果。是否应为两列分别计算偏移量，是否应根据数据预先计算，还是在设置属性时动态计算？如何扩展代码库，以使具有相同值的项目位于彼此之下，相应地调整其他项目，并使两列中的值保持在同一水平位置？

Answer 1

为了解决困惑的文本标签问题，我在想一下您的第一个示例，我不确定它的用处如何，但是如果将其添加到讨论中，我想我会分享。

我的第一步是淡化悬停的数据点的文本标签周围的文本，这只是选择与当前选定标签的边界框重叠的文本标签，并将其转变为接近零的不透明度:
http://bl.ocks.org/2554902

然后，我尝试以一种紧凑的方式安排文本标签的方式，以使每个文本标签都可见，我没有完成它的实现，因为它似乎过多地扩展了可视化的范围(目前还不行)。在更改年份时效果很好。.)，但是值得考虑的是在“紧凑”数据略少的情况下进行以下操作:
http://bl.ocks.org/2554910

编辑:似乎这些不能按照预期在Firefox中工作，与getBBox()似乎是一个问题。