Question

无法将图像添加到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);

Answer 1

元素的翻译是相对于其父元素的。也就是说，默认情况下，元素将与其父元素位于相同的位置。因此，您需要执行的转换不依赖于传入的动态数据，而只取决于图像的尺寸。您需要按如下方式设置transform。

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

您可能还想让图片的背景透明，以便您仍然可以看到圆圈。

将图像添加到D3.js中的气泡布局

1 个答案: