【发布时间】：2015-08-05 11:49:46
【问题描述】：
我（仍在）使用来自 github (https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates) 的平行坐标库（基于 d3.js）处理一些数据的表示。
目前我面临的问题是，在我重新排列轴之后，有一个不应该存在的阴影。
在这里您可以看到第二轴和第三轴之间的阴影，它不应该存在。
其他阴影工作正常（如下图所示）。只有这个额外的。
如果我可能以错误的方式使用 .shadows() 方法，我检查了库的 api 描述，但没有找到任何东西。我虽然检查了问题、stackoverflow 和 google，但没有发现任何帮助。
这是我的代码：
<link rel="stylesheet" type="text/css" href="Imports/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="Imports/style.css">
<script src="Imports/lib/d3.min.js"></script>
<script src="Imports/d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="Imports/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="Imports/style.css">
<body>
<input type="file" id="fileInput" />
<div id="example" class="parcoords" style="width:700px; height:300px; position:relativ;"></div>
<script>
function handleFileSelect(evt) {
var inputFiles=evt.target.files;
var reader=new FileReader();
reader.onload = (function(e){
ausfuehren(reader.result); //call the 'main' method
});
reader.readAsText(inputFiles[0]);
}
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
// main method
function ausfuehren(eingabe){
var save=eingabe;
save=parse(save);
save=drawParallelCoordinates(save);
}
// text ->objekt Array
function parse(text){
var ergebnis= text.split("\n"); //split into single lines
var header = ergebnis[0].split(","); //split the first line by "," to get the names of the attributes/dimensions
var final_res = []; //arrayList
for (var i = 1; i<ergebnis.length; i++) { //loop over the following lines, which contain the information for the representet objekts
var zeile=ergebnis[i];
var tmp = zeile.split(","); //split by "," to get the single attributevalues
final_res.push({}); //push a new objekt to the array list
for (var j = 0, element; element = tmp[j]; j++) { //loop over every attribute
final_res[i-1][header[j]] = element; // add dynamical one attribute to the objekt with the identifier which is in the header and the value from the csv
}
}
return final_res;
}
// eingabe: the data
function drawParallelCoordinates(eingabe){ //Objekt Array -> Parcoords Objekt
console.log("drawParallelCoordinates: The data:",eingabe);
var parcoords = d3.parcoords()("#example")
.data(eingabe)
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
return parcoords;
}
</script>
</body>
（如果你想运行它（它应该可以工作），你需要在导入目录中导入 d3 和 paarcoords lib，该目录必须与 htmlfile 位于同一目录中） （您可以通过以下链接获取我的“imports”目录： http://ge.tt/31WHTgL2/v/0?c)
主要功能部分是代码末尾的drawParallelCoordinates方法。
上传的 csv 文件包含以下内容：
name,reifen,tueren,ps
audi ,4,5,300
motorad,2,0,100
fiat,4,5,60
trike,3,0,130
问题是：
我做错了吗？
如果是这样：我做错了什么，正确的解决方案是什么，或者我在哪里可以找到答案？
还是我面临图书馆中的错误
更新：（一些附加信息）
看起来相似的一件事（它也会导致错误的阴影）可能是由于缺少/未定义的值造成的。但在这里我认为情况并非如此，因为我没有找到一个点，在我的小（上面的 postet）示例中可能缺少一个值。
我观察到所描述的行为仅出现在图的底部（这意味着：仅当彼此相邻的轴的最小值连接时）如果您随后更改轴的顺序，阴影将保留。所以你可以创造新的错误阴影。 （目前不知道会不会从一开始就出现这种错误的影子）
小提琴
这是工作小提琴：https://jsfiddle.net/x74wemq0/4/
不知何故，小提琴的结果窗口中不会发生错误。
也许我只使用了旧版本的库，并且该错误已经修复。 （我会检查这个）
提前致谢
琼斯
【问题讨论】：
-
你能做一个完整的 jsfiddle (jsfiddle.net) 吗？
-
我正在尝试，但我从未使用过它。我不明白，如何包含所需的输入（d3、js 和库）你能告诉我在哪里可以学习它，或者我应该为它发布一个新问题吗？
-
要在 jsfiddle 中添加库，请使用外部脚本而不是本地脚本，方法是从 CDN 添加它们，例如cdnjs.com/libraries/d3
-
@Manuel 我添加了工作小提琴
标签： d3.js parallel-coordinates