如何在d3.js中创建“斜率图”

Question

在定量信息的视觉显示中，Edward Tufte为一个非常小的图表类型（more information）创造了一个术语“斜率图”。权威示例如下所示：

在野外d3.js中至少有两个slopegraph实现：

• 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

编写良好的问题和漂亮的启动代码，包含调试语句，道具！

没有通过编码我想到的所有事情，但至少为了讨论，这里是。 （编码很简单;想出什么代码/看起来应该更难看。）

1. 使用线性比例作为指导的[非优化]版本，但通过向下移动所有后续条目来将重叠的条目空出。 （我猜这实际上只是伸展了Y轴;不幸的是，这使得它成为一个非常高的图像。尝试比较更接近的年份，例如2008年和2009年 - 图像并没有那么紧张。） http://bl.ocks.org/2547496（gist）

2. 应用于序数量表的相同方法。我更喜欢linear比例版本，因为ordinal比例版本并不试图通过斜坡传达任何绝对信息;然而，这使得图像更紧凑。 http://bl.ocks.org/2573074（gist）

3. 将近似值组合在一起。 （如果有兴趣，将实施。）

请注意，示例1和示例2都是不完美的实现，但您明白了。如果您正在寻找其中任何一个，我可以解决它们。

Answer 2

为了解决乱七八糟的文字标签问题我试图解决你的第一个例子，我不确定它会有多大用处，但如果它增加了讨论，我想我会分享..

我的第一个努力是淡化围绕悬停在其上的数据点的文本标签周围的文本，这只是选择与当前所选标签的边界框重叠的文本标签，并将它们转换为接近零的不透明度： http://bl.ocks.org/2554902

然后我试图以一种紧凑的方式排列文本标签的方法，以便每个都可以查看，我没有完成它的实现，因为它似乎过多地扩展了可视化的边界（它也目前在更改年份时效果不佳..），但在略微“紧凑”的数据上看这样的事情可能是值得的： http://bl.ocks.org/2554910

编辑：似乎这些在firefox中没有按预期工作，似乎是getBBox（）的问题..

Answer 3

只是想与Jefff Clark分享另一个例子：

http://neoformix.com/Projects/ObesitySlope/

他使用了Processing但是非常优雅地处理了上面的一些问题（人们可以说它使用规范化的变量也变得更简单了）

1. 使用扩展聚合来简化可视化并减少初始数据点数。
2. 主要标记每个点的斜坡的一侧
3. 在关闭/重叠点上隐藏标签，直到它们悬停（此时，初始标签暂时消失）

总的来说，杰夫在这方面做得非常出色。我认为他非常注重细节。会热衷于在D3中看到类似的例子！