我正在尝试使用 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”和“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 文件中注释掉这个 block 。
这是一个PLUNK在你的示例中，我已经注释掉了上面的代码块。现在输出如您所料。希望对您有所帮助。
关于javascript - 并非所有坐标都使用平行坐标 (d3) 绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24826932/