1

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

        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());
4

1 回答 1

4

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

接下来，您正在使用d3.svg.area()，它的目的不仅仅是绘制一条与您传入其中的点相对应的路径；相反，它实际上是在尝试添加点以绘制通常是图表下方的区域，在您的情况下这是没有意义的。相反，只需使用该d3.svg.line()功能，它只会做您需要的事情，而无需尝试添加任何其他点。

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

于 2013-05-20T22:17:31.987 回答