为什么这个 d3 六边形绘制不正确？答案

【问题标题】：Why isn't this d3 hexagon drawing correctly?为什么这个 d3 六边形绘制不正确？
【发布时间】：2013-05-15 06:24:54
【问题描述】：

我编写了一个代码来制作一个简单的六边形，但由于某种原因它没有正确绘制。我使用“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());

【问题讨论】：

标签： javascript path d3.js area

【解决方案1】：

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

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

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

【讨论】：