平行坐标图中的错误阴影

Question

我（仍在）使用来自 github (https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates)（基于 d3.js）的平行坐标库来表示某些数据。

目前我遇到的问题是，在我重新排序轴后，有一个不应该存在的阴影。

将数据上传到网站后，情节如下所示：

重新排序后（将第一个切换为坐标轴）绘图如下所示：

在这里你可以看到第二和第三轴之间有阴影，不应该在那里。
其他阴影效果很好（如下图所示）。只有这个额外的。

我检查了库的 api 描述，如果我可能以错误的方式使用 .shadows() 方法，但没有找到任何东西。我虽然检查了问题，Whosebug 和 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，该目录必须与html文件位于同一目录中）（你可以在下面link获取我的"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

内部数据（直接在传递给 parcoords 之前）如下：

问题是：我做错了吗？如果是这样：我做错了什么，正确的解决方案是什么，或者我在哪里可以找到答案？
还是我遇到了库中的错误

更新：（一些附加信息）

一个看起来相似的东西（它也会导致错误的阴影）可能是由缺失/未定义的值引起的。但在这里我认为情况并非如此，因为我没有找到我的小（上面的postet）示例中可能缺少值的地方。

我观察到所描述的行为仅出现在图的底部（这意味着：仅当彼此相邻的轴的最小值连接时）如果您随后更改轴的顺序，则阴影会保留。所以你可以创建新的错误阴影。 (暂时不知道会不会出现这样的开头错误的影子)

Fiddle

这是工作 fiddle：https://jsfiddle.net/x74wemq0/4/
fiddle 的结果 window 中并没有出现错误。也许我只有旧版本的库并且错误已经修复。（我会检查这个）

提前致谢
琼斯

Answer 1

我切换到通过 link 加载导入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.css"/>

所以现在我有了最新版本的库，错误不再发生。
我认为这是我以前使用的旧版本中的一个错误，现在应该修复了。

问候琼斯

PS：如果我错了并且错误再次发生，我会通知您；）

平行坐标图中的错误阴影

wrong shadows at a parallel coordinates plot

d3.js

parallel-coordinates

更新：（一些附加信息）

Fiddle