d3.js 的平行坐标答案

【问题标题】：Parallel coordinates with d3.jsd3.js 的平行坐标
【发布时间】：2016-06-04 17:37:10
【问题描述】：

我需要用 d3.js 表示一个平行坐标。首先，我不知道我认为是否可以实现（以及平行坐标是否是正确的图表）。我将解释我的想法：我从数据库中获取数据，并将它们暴露在 JSON 中，然后将它们存储在对象数组中（使用 JavaScript）。这是数据http://pastebin.com/DZcMqDMc 的示例。我想沿横坐标轴表示年份（尽管有年份重复，正如您从数据示例中看到的那样），而沿这些年份的纵坐标轴值（值以百分比为单位，范围从 1 到 100）。我想根据 JSON 文件中的“value1”和“value2”属性表示两行。是否可以？平行坐标是正确的图表吗？

我现在的主要问题是我不明白如何正确设置两个域（横坐标和纵坐标）。我基于 Bostock 的 Parellel Coordinates 示例。

对于横坐标，我在想这样的事情：

x.domain(
    d3.extent(test, 
        function(d) {
            return d.years;
        }
    )
);

有意义吗？

【问题讨论】：

是的，完全可以使用 d3 创建平行坐标图。但是从技术上讲，您所描述的是折线图，而不是平行坐标：“平行坐标图与时间序列可视化密切相关，只是它应用于轴不对应时间点的数据，因此没有自然顺序”。在真正的 PC 图表中，您可以随意更改纵轴的顺序。
@GerardoFurtado 你所说的正是我的想法。感谢您以正确的方式指出我。

标签： javascript d3.js parallel-coordinates

【解决方案1】：

试试 multi line chart。这可能适合您的需要。我不确定你在尝试什么。

【讨论】：

嗨，如果有人可以帮助解决这些平行坐标的问题 - stackoverflow.com/questions/49329600/… 或 stackoverflow.com/questions/49334965/… 。这会有很大帮助。提前致谢。

【解决方案2】：

只需做一个折线图，并通过将刻度格式化为从 0 到高度来生成垂直线（在您的 var xAxis 代码中包括 .tickSize(0-height)）。你必须选择正确的刻度数，就像在 ticks() 中一样，这样你就可以得到你想要的行。

【讨论】：

嗨，如果有人可以帮助解决这些平行坐标的问题 - stackoverflow.com/questions/49329600/… 或 stackoverflow.com/questions/49334965/… 。这会有很大帮助。提前致谢。

【解决方案3】：

查看 Parcoords，这是一个基于 d3 的平行坐标库。有关与 d3 v5 的兼容性，请参阅 https://github.com/BigFatDog/parcoords-es，它基于原始 Parcoords 库 (https://github.com/syntagmatic/parallel-coordinates)，它依赖于 d3 的过时版本。

有关示例和示例代码，请查看以下链接：http://syntagmatic.github.io/parallel-coordinates/。

【讨论】：