问题标签 [parallel-coordinates]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
829 浏览

javascript - 隐藏平行坐标图的轴之一

我用平行坐标库(基于 d3.js)(https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates)表示一些数据

代码的主要功能部分如下:

到目前为止它工作正常:)
但现在我想隐藏平行坐标的一个特定轴;我只是不想表现出来。

我希望轴被完全移除,这样它就不会出现,并且线条不会受到这个维度的值的影响,但我不想通过操纵数据来做到这一点。我只想操纵情节(这就是我称之为隐藏的原因)。

我已经搜索了 api 描述,但没有找到任何东西。我在互联网上搜索,但也没有找到任何东西。但我想我记得我已经看到了代码的和平,第一个轴被隐藏了,但我再也找不到它了。
谁能告诉我,我如何隐藏轴或在哪里可以找到解决方案?谢谢你,问候
琼斯

0 投票
1 回答
166 浏览

d3.js - 平行坐标图中的错误阴影

我(仍在)使用来自 github(https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates)的并行坐标库(基于 d3.js)处理一些数据的表示。

目前我面临的问题是,在我重新排列轴之后,有一个不应该存在的阴影。

将数据上传到网站后,情节如下所示: 在此处输入图像描述

重新排序后(将第一个切换到轴),情节如下所示: 在此处输入图像描述

在这里,您可以看到第二轴和第三轴之间的阴影,它不应该存在。
其他阴影工作正常(如下图所示)。只有这个额外的。 在此处输入图像描述

如果我可能以错误的方式使用 .shadows() 方法,我检查了库的 api 描述,但没有找到任何东西。我虽然检查了问题、stackoverflow 和谷歌,但没有发现任何有用的东西。

这是我的代码:

(如果你想运行它(它应该可以工作),你需要在导入目录中导入 d3 和 paarcoords lib,该目录必须与 htmlfile 位于同一目录中)(你可以在以下链接: http ://ge.tt/31WHTgL2/v/0?c )

主要功能部分是代码末尾的drawParallelCoordinates方法。

上传的 csv 文件包含以下内容:

内部数据(直接在移交给 parcoords 之前)如下: 在此处输入图像描述

问题是:我做错了吗?如果是这样:我做错了什么,正确的解决方案是什么,或者我在哪里可以找到答案?
还是我在图书馆面临一个错误


更新:(一些附加信息)

看起来相似的一件事(它也会导致错误的阴影)可能是由缺少/未定义的值引起的。但在这里我认为情况并非如此,因为我没有找到一个点,在我的小(上面的 postet)示例中可能缺少一个值。

我观察到所描述的行为只出现在图的底部(这意味着:只有当彼此相邻的轴的最小值被连接时)如果您随后更改轴的顺序,阴影就会保留。所以你可以创造新的错误阴影。(目前我不知道是否会从一开始就有这样的错误阴影)


小提琴

这是工作小提琴:https
: //jsfiddle.net/x74wemq0/4/ 不知何故,错误不会出现在小提琴的结果窗口中。也许我只使用了旧版本的库,并且该错误已经修复。(我会检查这个)


提前感谢
琼斯

0 投票
1 回答
191 浏览

javascript - 将平行坐标库(d3.js)导入 jsfiddle

我正在尝试用 jsfiddle 做我的一个项目以便能够分享它(另一个问题)。
这是我到目前为止所做的: https ://jsfiddle.net/x74wemq0/3/

我已经包含了我需要的 d3.js(上面发布)。
缺少的一件事是该库的导入https://github.com/syntagmatic/parallel-coordinates但我没有找到我必须使用的链接(老实说我真的不知道如何使用它正确)。你能告诉我什么是正确的链接,我必须如何使用它或者我可以在哪里学习如何(对于初学者)。


我已经尝试过:使用指向库的(原始)代码的 github 链接(https://raw.githubusercontent.com/syntagmatic/parallel-coordinates/master/d3.parcoords.js)但那没有t 工作(也许我以错误的方式使用它;我使用它等于 d3.js 导入)


提前感谢
琼斯

0 投票
0 回答
86 浏览

d3.js - 获取特定值在平行坐标图的轴上的位置

有没有办法我可以获得轴上特定值的相对位置?

例如:

在此处输入图像描述

getPosition("fiat") 应该返回类似 0,75
的值(getPosition 是我正在搜索的函数的占位符)

提前感谢
琼斯

0 投票
1 回答
339 浏览

javascript - 平行坐标上的轴重新排序事件

我仍在使用https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates和 d3.js绘制平行坐标图

轴重新排序后,我需要更新一些东西。
因此,尝试向 parcoords 添加一个侦听器,但我没有找到在重新排序轴时触发的事件是如何调用的。

我使用 .reorderable() 方法来启用重新排序。我试过了

但“维度”不是正确的事件,它仅在使用 .dimensions() 方法更改轴后触发。翻阅了库的examples,但只找到了关于brush events,又翻阅了api描述,但没有找到正确的event。

问题是:重新排序事件叫什么?

提前
致谢琼斯

0 投票
1 回答
1019 浏览

d3.js - d3.js 具有一种不同比例的平行坐标

我正在尝试使用 d3.js 生成平行坐标我的问题是第一个比例应该显示不同的字符串。

使用原始代码,它看起来像这样:

通过我的测试,它看起来像这样(没有行): 错误代码是:

错误:属性 d="M33,NaNL99,161.37817638266068L165,6.543121881682145L231,16.962488563586458L297,180" 的值无效

这是我的代码:

0 投票
1 回答
993 浏览

d3.js - D3js中的响应式平行坐标图

我已经制作了一个平行坐标图,现在我想让它响应。
为了测试响应能力,我想首先让Mike Bostock 的这个例子是响应式的。

我面临的问题是,如果我将“svg”直接放在“body”标签内,它会完美运行。但是当我将“svg”放在一些 div 中时,调整窗口大小时图表会被裁剪。此外,svg 的高度被提到为 70%,如果我将其设为 80%,则图表将被裁剪而无需调整大小。我知道还有另一种选择是使用 viewBox 和 preserveAspectRatio,但我使用这种方法是因为它很容易理解,对于我或任何其他阅读我的代码的人来说。这是方法:

是完整代码的 plunker 链接。有人可以指出代码有什么问题吗?

0 投票
1 回答
178 浏览

d3.js - d3 parcoords lineWidth 基于属性

我正在尝试根据属性将 lineWidth 设置为每一行。如果某些属性具有某些值,则应定义该折线的宽度。

我对颜色有类似的功能:

现在我正在寻找类似的线宽

0 投票
1 回答
554 浏览

r - 控制 ggparcoord 中的 alpha(来自 GGally 包)

我正在尝试从与我的问题类似的问题中构建(​​我从中借用了独立的示例和标题灵感)。我正在尝试将透明度单独应用于 ggparcoord 的每一行,或者以某种方式在另一层之上添加两层 ggparcoord。下面提供了我为解决方案工作的问题和数据格式的详细描述。


我有一个包含数千行的数据集,我们称之为x

在对这些数据进行聚类后,我还得到了一组 5 行,我们称之为数据集y

为了查看y重叠的质心x,我使用以下代码。首先,我将 y 添加到 x 使得 5 行位于最终数据框的底部。这可以确保 ggparcoord 将它们放在最后,因此保持在所有数据之上:

接下来,我按照我提到的问题建议为 df 创建一个新列,以便我可以对质心进行不同的着色,因此可以将其与数据区分开来:

最后我绘制它:

我遇到的问题是从这个阶段开始。在我的原始数据上,仅绘制 x 并不会带来太多的洞察力,因为它是大量的行(在此数据上,这相当于在上面使用 ggparcoordx而不是df

在此处输入图像描述

通过alphaLines大幅减少(0.05),由于线条的重叠,我自然可以看到一些簇(这再次在x减少时运行 ggparcoord alphaLines):

在此处输入图像描述

df观察添加到第二个图而不是第一个图顶部的质心更有意义。

但是,由于所有内容都在单个数据帧上,因此为 alphaLine 应用如此高的值会使质心线消失。然后我唯一的选择是在 df 上使用 ggparcoord(如上所述)而不降低 alphaValue:

在此处输入图像描述

我的目标是将红线(质心线)放在第二个图形的顶部,并且 alpha 非常低。到目前为止,我想到了两种方法,但无法使其正常工作:

(1) 有什么方法可以在数据框上创建一列,类似于对颜色所做的操作,这样我就可以为每一行指定 alpha 值?

(2) 我最初试图创建两个不同的 ggparcoords 并“总结”希望叠加但出现错误。

这个问题可能包含太多细节,但我认为这可以更好地激发答案的适用性,以满足其他读者的兴趣。

我正在寻找的答案将使用当前格式提供的数据变量并生成我正在寻找的图。更好的数据重建方法也受到欢迎,但首选使用当前结构。

0 投票
1 回答
519 浏览

layout - D3.js 平行坐标与轴的水平布局

我正在使用http://bl.ocks.org/jasondavies/1341281平行坐标可视化来可视化我的数据。但是,我希望将轴重新定向为水平布局,而不是针对某些特定任务的轴的传统垂直布局。我尝试使用代码,但没有到达任何地方。

我附上了一张图片,描述了我真正想要实现的目标。我有足够的信心,如果我能让轴正确布局,我可以修复轴和刻度上的标签。有人可以帮忙吗?先感谢您。预期的轴布局