0

无法在 D3.js 中将图像添加到气泡布局。我正在尝试将图像附加到气泡布局中的圆圈，但它不起作用。图像没有得到转换。我想看看这个：- http://www.cloudshapes.co.uk/labs/attention-hungry-cabinet-ministers/

这是我一直在尝试做的小提琴链接：http: //jsfiddle.net/Ankitb/eYGCY/4/

var force = d3.layout.force()
              .charge(-300)
              .size([w, h])
              .nodes(nodes)
              .on("tick", tick)
              .start();

    function tick() {
        svg.selectAll("circle")
            .attr("cx", function (d) { return d.x; })
            .attr("cy", function (d) { return d.y; });
    }

    var interval = setInterval(function () {
        var d = {
            x: w / 4 + 2 *( Math.random() - 1),
            y: h / 4 + 2 *( Math.random() - 1)
        };
        var personDot = svg.append("g")
                           .attr("class", "g-person-dots")
                           .selectAll("g")
                           .data([d])
                           .enter().append("g")
                           .attr("transform", function (d) { return "translate(" + d.x+ "," + d.y + ")"; });
        personDot.append("circle")
                  .data([d]).attr("r", 40)
                  //.attr("r", 1e-6)
        .attr("cx",0).attr("cy",0)
            .transition().style("stroke", "gray").style("fill","white")
              .ease(Math.sqrt);

        personDot.append("image").data([d])
             .attr("xlink:href", "PeopleProfilePicture.jpg")
         //     .attr("x", function (d, i) { return -mugDiameter / 2 - mugDiameter * (i % 9); })
         //.attr("y", function (d, i) { return -mugDiameter / 2 - mugDiameter * (i / 9 | 0); })
             .attr("width", 80)
             .attr("height", 80)
             .attr("transform", function (d) { return "translate(" + -d.x / 10 + "," + -d.y / 10 + ")"; });


        if (nodes.push(d) > 10) clearInterval(interval);
        else { force.start(); }

    }, 30);
4

1 回答 1

1

元素的平移是相对于其父元素的。也就是说，默认情况下，元素将与其父元素处于相同的位置。因此，您需要做的翻译并不取决于您传入的动态数据，而仅取决于图像的尺寸。您需要进行transform如下设置。

.attr("transform", "translate(-40,-40)");

您可能还希望使图像的背景透明，以便您仍然可以看到圆圈。

于 2013-07-17T04:55:54.057 回答