Arrows do not touch nodes in d3.js in tree layout

Question

I am using a d3 tree with more than 500 nodes (one root and 500/1000 child nodes to it at level 2). The arrows look perfect for up to 50 child nodes, but are larger than the left and right side nodes, the arrows shown at the top of the node and the path intersect diagonally with the node outline. how to solve this problem so that the arrow touches the node where the path the node intersects? The nodes used are rectangular, as indicated in this question. The arrows do not touch the nodes in d3. Js

Answer 1

Well, that's all your decision. This is what I call "reverse." This is the same approach I used in this question . It works by setting the path, and then subtracting the "radius" of your square plus the marker head from it.

First of all, first you need to add the attribute "marker", it can be used in all lines. Secondly, I switched paths to draw from top to bottom, you made them draw what I will be back from the child to the parent. This requires additional rotation of the head.

Here is the code:

var width = 500; var height = 500; var nodeWidth = 40; var nodeHeight = 40; var circleRadius = 5; var diagramLayout; var graphData = { "nodes": [{ "uid": "Term20", "name": "Term20", "image": "images/Term.png" }, { "uid": "glossforArrow", "name": "glossforArrow", "image": "images/Glossary.png" }, { "uid": "Term43", "name": "Term43", "image": "images/Term.png" }, { "uid": "Term1", "name": "Term43", "image": "images/Term.png" }, { "uid": "Term2", "name": "Term43", "image": "images/Term.png" }], "links": [{ "source": "glossforArrow", "target": "Term20", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term43", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term1", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term3", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term4", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term5", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term6", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term7", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term8", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term9", "direction": "output", "label": "Owned Terms" }, { "source": "glossforArrow", "target": "Term2", "direction": "output", "label": "Owned Terms" }] }; treeInitialize(graphData) function treeInitialize(graphData) { diagramLayout = d3.select("#diagramLayout") .attr("id", "diagramLayout") //set id .attr("width", width) //set width .attr("height", height) //set height .append("g") .attr("transform", "translate(" + 20 + "," + 20 + ")") markerRefx = 40; var data2 = graphData.links.filter(function(l) { if (l.target == undefined && l.source == undefined) { return false; } else { return true; } }); data2.push(JSON.parse('{"target":"glossforArrow","source":""}')) var treeData = d3.stratify().id(function(d) { return d.target; }).parentId(function(d) { return d.source; })(data2) nodes = d3.hierarchy(treeData, function(d) { return d.children; }); var levelWidth = [1]; var childCount = function(level, n) { if (n.children && n.children.length > 0) { if (levelWidth.length <= level + 1) levelWidth.push(0); levelWidth[level + 1] += n.children.length; n.children.forEach(function(d) { childCount(level + 1, d); }); } }; childCount(0, nodes); newHeight = d3.max(levelWidth) * 100; var tree = d3.tree().size([height, width]) tree.size([newHeight, height / 2]); tree.separation(function(a, b) { return a.parent == b.parent ? 50 : 100; }); nodes = tree(nodes); treeLayout(nodes); function treeLayout(nodes) { var node = diagramLayout.selectAll(".node"); node = node.data(nodes.descendants()); var link = diagramLayout.selectAll(".link") .data(nodes.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", "1px") .attr("stroke-opacity", "0.3") .attr("d", function(d) { return connector(d.parent, d); }) //nodes.descendants().slice(1).forEach(function(d) { var mark = diagramLayout.append("svg:defs").selectAll("marker") // .data(["start"]) // Different link/path types can be defined here .enter().append("svg:marker") // This section adds in the arrows .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", 0) .attr("refY", 0) .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto") .attr("stroke", "#000") .attr("fill", "#000") .append("svg:path") .attr("d", "M0,-5L10,0L0,5") .style("stroke-width", "0.3px") //.attr("transform","rotate(180,5, 0)"); // }); link.attr("marker-end", "url(#start)") .each(function(d, i, j) { var self = d3.select(this), t = this.getTotalLength(), p = this.getPointAtLength(t - 25); self.attr("d", connector(d.parent, p)); }) var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("height", nodeHeight) .attr("width", nodeWidth) nodeEnter.attr("transform", function(d) { return "translate(" + project(dx, dy) + ")"; }) var nodeIcon = nodeEnter.append("rect") .attr("class", "rect") .attr("x", -20) .attr("y", -20) .attr("rx", 10) .attr("width", 40) .attr("height", 40) .attr("stroke-width", function(d) { return Math.sqrt(2); }) .attr("stroke-opacity", "0.3") .attr("stroke", "#000") .attr("fill", "none") //wrap(nodeText, 8) } } function connector(from, to) { return "M" + project(from.x, from.y) + "C" + project(from.x, (from.y + to.y) / 2) + " " + project(to.x, (from.y + to.y) / 2) + " " + project(to.x, to.y); } function project(x, y) { return [x, y]; } 

 .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #000; stroke-opacity: .6; } 

 <script src="https://d3js.org/d3.v4.min.js"></script> <div id="mainScreen" style="height:100%;width:100%;position:absolute;"> <svg id="diagramLayout" style="height:100%;width:100%;position:absolute;"> </svg> </div>