并非所有坐标都使用平行坐标 (d3) 绘制答案

【问题标题】：Not all coordinates are plotted using parallel-coordinates (d3)并非所有坐标都使用平行坐标 (d3) 绘制
【发布时间】：2014-09-09 16:56:01
【问题描述】：

我正在尝试使用parallel-coordinates 库来绘制一些数据。我拥有的数据点的坐标都是字符串。例如，考虑以下CSV 表：

ID,TYPE,USER,OS,FooBar,Country
a1,X,1S,iOS,foo,US
a2,Y,1S,Android,bar,US

这是两个数据点，每个都有六个属性。我拥有的html MWE 如下：

<!doctype html>

<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
<script src="./d3.min.js"></script>
<script src="./d3.parcoords.js"></script>
<script src="./divgrid.js"></script>


<style>
/* data table styles */
#grid { height: 198px; }
.row, .header { clear: left; font-size: 12px; line-height: 18px; height: 18px; }
.row:nth-child(odd) { background: rgba(0,0,0,0.05); }
.header { font-weight: bold; }
.cell { float: left; overflow: hidden; white-space: nowrap; width: 100px; height: 18px; }
.col-0 { width: 180px; }
.col-1 { width: 80px; }
.col-2 { width: 180px; }
.col-3 { width: 150px;}
</style>

<title>Minimal Working Example</title>

<body>
<div id="visual" class="parcoords" style="width:1280px;height:350px"></div>
<p>Lines from the data</p>
<div id="grid"></div>
</body>


<!-- Setting and inserting the visualization and the corresponding table -->
<script>
 var parcoords = d3.parcoords()("#visual").color("steelblue");

 /*
 Load the data and visualize it
  */
 d3.csv('first-100.csv',function(data) {
   parcoords.data(data)
        .tickFormat(function(d) {return'';})
        .render().brushable().reorderable();

   var grid = d3.divgrid();
   d3.select("#grid")
     .datum(data.slice(0,30))
     .call(grid)
     .selectAll(".row")
     .on({
     "mouseover": function(d) { parcoords.highlight([d]) },
     "mouseout": parcoords.unhighlight
     });

   // update data table on brush event
   parcoords.on("brush", function(d) {
     d3.select("#grid")
       .datum(d.slice(0,30))
       .call(grid)
       .selectAll(".row")
       .on({
       "mouseover": function(d) { parcoords.highlight([d]) },
       "mouseout": parcoords.unhighlight
     });
   });
 });
</script>

不幸的是，正如您在屏幕截图中看到的那样，这只绘制了四 (4) 个坐标...我认为问题与所有坐标都是字符串这一事实有关，但我不确定。

有什么建议可以解决这个问题吗？

【问题讨论】：

缺失的两列在它们的行中都有两个相同的值。 'USER' 有两次'1S'，'Country' 有两次'US'。将它们用作维度并没有什么意义，因为它们是恒定的。
是的，但这只是一个例子。这两个数据点的可视化应该产生 intersecting 折线。
对，但我的意思是，这是由平行坐标库强制执行的，这就是为什么您看不到这两个维度的原因。 HERE 是源代码的相关部分。如您所见，如果一列的唯一值少于两个，则会将其过滤掉。
@jshanley 似乎这就是答案......你想把它变成一个合适的吗？

标签： javascript d3.js data-visualization parallel-coordinates

【解决方案1】：

问题在于平行坐标库会过滤掉数据集中唯一值少于两个的维度，数据中的“USER”和“Country”列就是这种情况。

相关源码为HERE。当前版本的 d3.parcoords.js 中的第 168 行，它起源于 src 目录中的 autoscale.js 文件。这是链接断开时的代码：

// hack to remove ordinal dimensions with many values
pc.dimensions(pc.dimensions().filter(function(p,i) {
  var uniques = yscale[p].domain().length;
  if (__.types[p] == "string" && (uniques > 60 || uniques < 2)) {
    return false;
  }
  return true;
}));

在您的情况下，如果您想强制呈现有问题的两列，一种解决方案是简单地在 d3.parcoords.js 文件中注释掉这个块。

这是您的示例的PLUNK，我在其中注释掉了上面的代码块。现在输出如您所愿。希望对您有所帮助。

【讨论】：