Question

我是d3的新手，我正在尝试使用http://syntagmatic.github.io/parallel-coordinates/

在这里，您可以看到网站上的简约示例。

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
<div id="example" class="parcoords" style="width:360px;height:150px"></div>

<script>
var data = [
  [0,-0,0,0,0,3 ],
  [1,-1,1,2,1,6 ],
  [2,-2,4,4,0.5,2],
  [3,-3,9,6,0.33,4],
  [4,-4,16,8,0.25,9]
];

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .createAxes();
</script>

我希望某些尺寸不被展示，并尝试使用＃parcoords.dimensions（尺寸）的不同方法。你会如何解决这个问题？

Answer 1

我看了一下小提琴格拉特的设置，但看起来没有像我想象的那样工作。在那个小提琴中，尺寸的名称已被删除，但尺寸之间的一个或多个线仍然代表原始数据。这种行为对我来说似乎很奇怪，它可能是一个错误。

无论如何，我已经设置了一个小提琴，可以使用以下方式对数据进行预过滤：

data.forEach( function (e,j) { 
    var temp ={};
    filteredDimensions.forEach ( function (d,i) {
        temp[d] = e[d]
    })
    filteredData.push(temp)
})

有一个工作小提琴here

Answer 2

只需在.dimensions()之后和.ticks()之前添加.createAxes()来电：

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .dimensions([1,2,4])
  .render()
  .createAxes();

Jsfiddle here

在查看user1614080的解决方案后，他只是提前过滤数据，这很容易，而且始终可用，但不是您要求的。我尝试使用他的示例（带有名称），并使用了维度的名称（jsFiddle here）。我这样做的方式也适用于命名尺寸。

维度只需要在.render()之后到达某个地方，但我不确定原因。

编辑：最后弄清楚为什么这不正确。维度更新后需要调用.render()（稍微提到here）。两个示例都已更新，以修复轴之间的拐点。

如何使用d3 parcoords维度

2 个答案: