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可解决此问题。

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

1 个答案: