javascript - 为什么这个 d3 六边形绘图不正确？

Question

我编写了一个代码来制作一个简单的六边形，但由于某种原因，它没有正确绘制。我使用“A”、xDiff 和 yDiff 作为变量，因此我可以动态更改六边形的大小和位置，但它有一个奇怪的“尾部”。我的观点有误吗？哦，_s32 是 3 除以二的平方根。

        var _s32 = (Math.sqrt(3)/2);
        var A = 25;
        var xDiff = 100;
        var yDiff = 1000;
        var pointData = [[A+xDiff, 0+yDiff], [A/2+xDiff, A*_s32+yDiff], [-A/2+xDiff, A*_s32+yDiff], [-A+xDiff, 0+yDiff],
        [-A/2+xDiff, -A*_s32+yDiff], [A/2+xDiff, -A*_s32+yDiff]];
        var svgContainer = d3.select("body") //create container
                .append("svg")
                .attr("width", 1000)
                .attr("height", 1000);

        var enterElements = svgContainer.selectAll("path.area") //draw elements
                .data([pointData]).enter().append("path")
                .style("fill", "#ff0000")
                .attr("d", d3.svg.area());

Answer 1

首先，yDiff 位于 1000 位置，您的六边形几乎在 SVG 之外，因此您应该将其更改为 100。

接下来，您将使用 d3.svg.area()，它不仅可以绘制与您传入的点相对应的路径，还可以做更多的事情；相反，它实际上是在尝试添加点以绘制通常是图形下方的区域，这在您的情况下是没有意义的。相反，只需使用 d3.svg.line() 函数，它只会执行您需要的操作，而无需尝试添加任何其他点。

这是一个 jsFiddle:http://jsfiddle.net/LJuRp/