Question

我是d3js的新手，我正在讨论一个我坚持的项目。这是我的语法

    var node = svg.selectAll(".node")
                  .data(data.nodes)
                  .enter()
                //.append("circle")
                //.attr("r",5)
                  .append("img")
                  .attr("class", function(d) { return "flag flag-" + d.code; })




    node.style('left', d => d.x + "px")
            .style('top', d => d.y + "px");

   /*
   node.attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });
 */

基本上，我要做的是将圆圈（我已将其评论出来）更改为图像。你能帮我弄清楚我错过了什么吗？

Answer 1

您可以使用以下代码附加图片并调整＆＃39; x＆＃39;并且＆＃39; y＆＃39;相应地协调：

var node = svg.selectAll(".node")
           .data(data.nodes)
           .enter()
           .append('image')
           .attr('xlink:href', 'http://www.charbase.com/images/glyph/9899')
           .attr('width', '50px')
           .attr('height', '50px')
           .attr("class", function(d) { return "flag flag-" + d.code; });

force.on("tick", function() {
.
.
// node.style('left', d => d.x + "px")
//      .style('top', d => d.y + "px");

node.attr("x", function(d) { return d.x - 25; })
    .attr("y", function(d) { return d.y - 25; });
.
.
});

我已在https://jsfiddle.net/o81reo7a/

中更新了您的代码

将svg圈子改为图像

1 个答案: