私は（まだ）githubの平行座標ライブラリ（https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates）（d3.jsに基づく）を使用して、いくつかのデータの表現に取り組んでいます。
現時点では、軸を並べ替えた後、存在しないはずの影があるという問題に直面しています。
ウェブサイトにデータをアップロードすると、プロットは次のようになります。
並べ替え (最初のものを軸に切り替える) 後、プロットは次のようになります。
ここでは、2 番目と 3 番目の軸の間にあるべきではない影が見えます。
他の影は正常に機能します (次の図でわかるように)。この追加のものだけがあります。
.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>
（実行したい場合（動作するはずです）、htmlfileと同じディレクトリにあるインポートディレクトリにd3とpaarcoords libのインポートが必要です）（私の「インポート」ディレクトリは次のリンク: 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
内部データ (parcoords へのオーバーハンドリングの直前) は次のとおりです。
質問は次のとおりです。私は間違いをしますか？もしそうなら：私は何を間違っていますか、正しい解決策は何ですか、またはどこで答えを見つけることができますか？
または、ライブラリのバグに直面していますか
更新：（いくつかの追加情報）
似ているものの 1 つ (間違った影の原因にもなります) は、欠落している値または未定義の値が原因である可能性があります。しかし、ここでは、これは当てはまらないと思います。なぜなら、私の小さな(上のpostet)例で値が欠落している可能性があるスポットが見つからなかったからです。
私は、記述された動作がプロットの下部にのみ表示されることを観察しました (これは、隣り合う軸の最小値が接続されている場合のみ)、軸の順序を変更すると、影が残ります。そのため、新しい間違った影を作成できます。(現時点では、最初からそのような間違ったシャドウが存在する可能性があるかどうかはわかりません)
フィドル
ここに作業フィドルがあります: https://jsfiddle.net/x74wemq0/4/
どういうわけか、フィドルの結果ウィンドウでエラーは発生しません。たぶん、私は古いバージョンのライブラリしか持っておらず、バグはすでに修正されています。(私はこれをチェックします)
事前にありがとう
ジョーンズ