0

从我发布这个问题开始，我已经对这个问题进行了一些编辑。这是新代码： 这是我的代码：

        var elementTags = ["Google", 4, "Wikipedia", "Yahoo!", "Cindy"];
        var _s32 = (Math.sqrt(3)/2);
        var A = 75;
        var _counter = 0;
        var xDiff;
        var yDiff;
        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], [A+xDiff, 0+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());

我想要做的是为每个elementTags值创建一个新的六边形。每个新的六边形都应该有一个随机的 xDiff 和 yDiff，并且每次的值都_counter应该增加 1。

4

2 回答 2

1

你需要使用循环。这是修改后的代码：

var elementTags = ["Google", 4, "Wikipedia", "Yahoo!", "Cindy"];
var _s32 = (Math.sqrt(3)/2);
var A = 75;

var svgContainer = d3.select("body") //create container
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);

for (index = 0; index < elementTags.length; index++) {
    var xDiff = Math.random()*100+100;
    var yDiff = Math.random()*100+100;
    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]
        , [A+xDiff, 0+yDiff]
    ];

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

它在做你想做的事吗？

于 2013-05-20T18:08:22.320 回答
0

我有类似的情况，在这个问题中有所描述。我整理了一个代码示例，您可以在这里找到：http: //bl.ocks.org/explunit/4659227

关键思想是可以在每个数据点的追加期间调用路径生成函数：

svg.selectAll("path")
  .data(nodes).enter().append("svg:path")
  .attr("d", function(d) { return flow_shapes[d.NodeType](d.height, d.width);})

很难从您的代码中分辨出来，但似乎您正在尝试在循环中调用 .append 而不是构建数据，然后让 D3 在单个语句中添加所有注释。

将完整的代码放在 JSFiddle 中可能会对您有所帮助，这样我们就可以看到您正在尝试的所有内容。

于 2013-05-20T18:09:27.660 回答