D3 Force -使用动态refX为链接创建标记，以反映不同的节点大小

你的代码有两个问题:

1. 将markerWidth设置为13将定义标记元素适合的视口宽度。这本身就很好，并将在SVG使用的坐标系统中为标记提供13的宽度。但是，通过在标记上指定viewBox，您已经为<marker>元素的内容建立了一个内部坐标系统。在评价refX时将使用这个内部坐标系:

   坐标在应用' viewBox '和' preserveAspectRatio '属性后在坐标系中定义。

   如果你将refX设置为所需的偏移量，则不会考虑将viewPort适应标记宽度所需的缩放。需要考虑13/10的比例因子。

2. 当设置偏移量时，你缺少添加标记本身的宽度，即你偏离了10。

根据你的需要，有几种方法可以解决这个问题，只要你保持坐标系统同步。在下面的代码片段中，我将markerWidth设置为10，这将通过使外部和内部宽度具有相同的大小来处理它。这使您不必进行任何缩放，但也会略微减小SVG中的标记大小。如果你需要的大小正好是13，你将不得不做一些计算，但是。可以将示例中的相关行更改为:

.attr("viewBox", "0 -5 10 10")
.attr("refX", function(d) { 
   return force.nodes()[d.target].radius + 10;   // Add the marker's width               
})
.attr("refY", 0)
.attr("markerWidth", 10)                         // markerWidth equals viewBox width
.attr("markerHeight", 10)

var nodes = [{id:1, "radius": 20, "colour": "black"}, {id:2, "radius":40, "colour":"red"}, {id:3, "radius":30, "colour": "green"}];
var links = [{source: 0, target: 1}, {source: 1, target: 2}, {source: 2, target: 0}];
    
var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500).style("border", "1px solid black").attr("id", "svg");
    
var force = d3.layout.force()
  .size([500,500])
  .links(links)
  .nodes(nodes)
  .linkDistance(150)
  .on("tick", tick);
        
var nodes, links, defs;
        
    function render() {
        nodes = d3.select("#svg").selectAll(".node")
            .data(force.nodes())
            .enter()
            .append("circle")
            .attr("class", "node")
            .attr("r", function(d) { return d.radius})
            .attr("fill", "none")
            .attr("stroke", "black");
            
        links = d3.select("svg").selectAll(".link")
            .data(force.links())
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("stroke", "grey")
            .attr("fill", "black")
            .attr("stroke-width", 1)
            .attr("marker-end", function(d) { return "url(#marker" + force.nodes()[d.target].id + ")"})
            
        defs = d3.select("#svg").append("defs").selectAll(".marker")
			.data(force.links())
			.enter()
            .append("marker")
			.attr("class", "marker")
			.attr("id", function(d) { return "marker" + force.nodes()[d.target].id })
			.attr("viewBox", "0 -5 10 10")
            .attr("refX", function(d) { 
              return force.nodes()[d.target].radius + 10;   // Add the marker's width of 10
            })
            .attr("refY", 0)
			.attr("markerWidth", 10)                        // markerWidth equals viewBox width
			.attr("markerHeight", 10)
			.attr("orient", "auto")
			.append("path")
				.attr("d", "M0,-5 L10,0 L0,5")
				.style("stroke", "black")
				.style("fill", "black")
				.style("opacity", "1");
    };
    
    function tick() {
    
        nodes.attr("cx", function(d) {return d.x})
            .attr("cy", function(d) {return d.y});
            
        links.attr("d", function(d) {
            var x0 = d.source.x,
                y0 = d.source.y,
                x1 = d.target.x,
                y1 = d.target.y;
            return "M" + [x0,y0] + " L" + [x1,y1] + "";
            });
    };
    
    render()
    
    force.start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>