尝试将图像放置在节点内时,它们不会在强制布局内保持正确的位置

时间:2019-03-04 04:34:36

标签: javascript d3.js

我正在尝试使我的节点是图像,并且这些图像位于该节点中。但由于某些原因,他们停留在左上角。我已经基于示例尝试了很多事情,但是我不知道问题出在哪里。

enter image description here

var node = g.selectAll("g.node")
  .data(graph.nodes)
  //.filter(function(d){ return d.type=="circle"; })
var NodeCircleEnter= node.enter().append("g")
  .attr("class","node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

  NodeCircleEnter
  .append("circle")
  .attr("r", 20)
  .attr("fill", function(d) {
    return colorNode(d.group);
  })
  .style("stroke", function(d) {
    return colorNode(d.group);
  })

 // Append images
 var images = NodeCircleEnter.append("svg:image")
    .attr("xlink:href",  function(d) {console.log(d); return d.image;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

这是我的完整代码。

https://plnkr.co/edit/C2x7Zw5FkXHCUEpgWYWE?p=preview

现在,我无法移动节点:

enter image description here

0 个答案:

没有答案