Question

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

Answer 1

首先，yDiff处于1000位置，你的六边形几乎位于你的SVG之外，所以你应该将其改为100，如此。

接下来，你正在使用d3.svg.area()，它不仅可以绘制与传递给它的点相对应的路径;相反，它实际上是在尝试添加点以便绘制通常是图表下方的区域，在您的情况下这是毫无意义的。相反，只需使用d3.svg.line()功能，只需执行您需要的操作，而无需添加任何其他点。

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

为什么这个d3六角形图画没有正确？

1 个答案: