用d3问题绘制带有图像和箭头的图形

Question

我试图用d3在节点圆圈中插入图像并绘制目标节点上的箭头。带有图像和边缘的节点已正确绘制，但箭头缺失，但标记已在链接中定义和使用。 当我改变节点连接到“g”的方式时，会绘制箭头，但圆圈和图像消失。找不到错误留在哪里。

D3代码如下：

// define marker for the arrow 
svg.append("defs").selectAll("marker") 
    .data(["arrow"]) 
    .enter().append("marker") 
    .attr("id", function(d) { return d; }) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("path") 
    .attr("d", "M0,-5L10,0L0,5"); 

// add links 
var link = svg.append("g").selectAll(".link") 
    .data(links) 
    .enter().append("line") 
    .attr("class", "link") 
    .attr("marker-end", function(d) { return "url(#arrow)"; }) 
    .style("stroke", "#FF3300"); 


// add nodes 
var node = svg.append("g").selectAll(".node") 
    .data(nodes) 
    .enter().append("svg:g") 
    .attr("class", "node") 
    .on("dblclick", dblclick) 
    .call(force.drag); 

node.append("svg:circle") 
    .attr("r", 50) 
    .style("fill", "#FFEBE6") 
    .style("stroke", "#FF3300") 
    .style("stroke-width", 3); 

// add images - from base64 
node.append("image") 
    .attr("xlink:href", function(d){ 
     if (d.imgB64) { 
      return 'data:image/png;base64, ' + d.imgB64 ; 
     } 
    }) 
    .attr("x", -40) 
    .attr("y", -40) 
    .attr("width", 80) 
    .attr("height", 80) 
    .on("mouseout", function(d) {  
     div.transition()   
      .duration(500)  
      .style("opacity", 0.0); 
    }) 

Answer 1

没有错代码中，箭头似乎被隐藏/由节点圆和图像覆盖。分别将refX和refY属性更改为65和0可解决问题。