用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可解決問題。