在D3.js

Question

使用d3.js和conrec.js绘制轮廓时，我得到了奇怪的剪裁行为：

这是正确描绘的等高线图

这是一个剪裁的情节。路径填充不正确

有不良行为的情节的另一个例子

这是我的代码和方法。数据是一个31x31值的数组。我制作轮廓然后数据绑定轮廓的contourList。我猜测路径上发生了一些奇怪的事情！

            var cliff = -1000;
            data.push(d3.range(data[0].length).map(function() {
                return cliff;
            }));
            data.unshift(d3.range(data[0].length).map(function() {
                return cliff;
            }));
            data.forEach(function(d) {
                d.push(cliff);
                d.unshift(cliff);
            });

            var c = new Conrec,
                xs = d3.range(0, data.length),
                ys = d3.range(0, data[0].length),
                zs = [0],
                width = 300,
                height = 300,
                x = d3.scale.linear().range([0, width]).domain([0,
                    data.length
                ]),
                y = d3.scale.linear().range([height, 0]).domain([0,
                    data[0].length
                ]);

            c.contour(data, 0, xs.length - 1, 0, ys.length - 1, xs,
                ys, zs.length, zs);

            contourDict[key] = c;
            d3.select("svg").remove();
            var test = d3.select("#contour").append("svg")
                .attr("width", width)
                .attr("height", height)
                .selectAll("path")
                .data(c.contourList())
                .enter().append("path")
                .style("stroke", "black")
                .attr("d", d3.svg.line()
                    .x(function(d) {
                        return x(d.x);
                    })
                    .y(function(d) {
                        return y(d.y);
                    }));

感谢您的时间！