在量化信息的可视化显示中，Edward Tufte 创造了一个术语“斜率图”来表示一种非常简单的图表（更多信息）。权威的例子是这样的：
在d3.js中至少有两种斜坡图的实现：
我尝试了一个更具声明性的实现，并在两列中的值之间保持 100% 的对应关系，但被卡住了。正如预期的那样，当数据集中出现具有相似或相同值的项目时，图形重叠，图表不可读。
朴素版本( source ) 使用比例尺linear计算水平位置，而尝试“标准化”位置( source ) 使用ordinal比例尺。
我相信使用序数比例可以实现更好的结果，根据重叠项目的坐标计算偏移量。是否应该为两列分别计算偏移量，是否应该根据数据提前计算，还是在设置属性期间即时计算？如何扩展代码库，使具有相同值的项目位于彼此下方，其他项目相应调整并且两列中的值保持在相同的水平位置？
写得很好的问题和带有调试语句的漂亮起始代码，道具！
没有完成我想到的所有事情的编码，但至少为了讨论，这里是。（编码很容易；想出要编码的内容/应该是什么样子更难。）
使用线性比例作为指导的 [非优化] 版本，但通过将所有后续条目向下移动来分隔重叠条目。（我想这实际上只是拉伸了 Y 轴；不幸的是，这使它成为一个非常高的图像。尝试比较更近的年份，例如 2008 年和 2009 年——图像没有被拉伸。） http://bl.ocks.org/2547496（要点）
相同的方法适用于序数尺度。我更喜欢linear比例版本，因为ordinal比例版本不会尝试通过斜坡传达任何绝对信息。然而，这使得图像更紧凑。http://bl.ocks.org/2573074（要点）
将附近的值组合在一起。（如果有兴趣将实施。）
请注意，示例 1 和示例 2 都是不完美的实现，但您明白了。如果您正在寻找其中任何一个，我可以修复它们。
只是想分享杰夫克拉克的另一个例子：
http://neoformix.com/Projects/ObesitySlope/
他使用了处理，但非常优雅地处理了上面的一些问题（有人可以说它也使用标准化变量变得更简单一些）
总的来说，杰夫在这方面做得非常出色。我认为他非常注重细节。很想在 D3 中看到类似的例子！
我正在玩弄你的第一个例子，试图解决混乱的文本标签问题，我不确定它会有多大用处，但如果它增加了讨论，我想我会分享..
我的第一个努力是淡化悬停在数据点的文本标签周围的文本，这只是选择与当前选定标签的边界框重叠的文本标签，并将它们转换为接近零的不透明度： http://bl.ocks .org/2554902
然后我尝试了一种以紧凑方式排列文本标签的方法，以便它们中的每一个都是可见的，我没有完成它的实现，因为它似乎过多地扩展了可视化的边界（它目前也没有更改年份时效果很好..），但在稍微不那么“紧凑”的数据上寻找类似的东西可能是值得的：http: //bl.ocks.org/2554910
编辑：似乎这些在 Firefox 中无法按预期工作，似乎是 getBBox() 的问题。