chart = { const markerBoxWidth = 4; const markerBoxHeight = 4; const refX = markerBoxWidth / 2; const refY = markerBoxHeight / 2; const markerWidth = markerBoxWidth / 2; const markerHeight = markerBoxHeight / 2; const arrowPoints = [[0, 0], [0, 4], [4, 2]]; const root = tree(data); var tooltip = d3.select("body") .append("div") .attr("class", "top-tooltip") .html(``); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${0 - 80},${root.dx - x0})`); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#D5D5D5") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", (d) => { const x = width - d.source.y; const y = d.source.x; const targetX = width - d.target.y; const targetY = d.target.x; const dr = 0; return "M" + (x - 7) + "," + y + "A" + dr + "," + dr + " 0 0,1 " + targetX + "," + targetY; }) .attr('marker-start', 'url(#arrow)') .on("mouseover", function (d) { return tooltip.style("visibility", "visible").style("top", (d3.event.offsetY + 50) + "px").style("left", (d3.event.offsetX - 75) + "px"); }) .on("mouseout", function () { return tooltip.style("visibility", "hidden"); }); const node = g.append("g") .attr("stroke-linejoin", "straight") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${width - d.y},${d.x})`); node.append("circle") .attr("fill", "#EDF0FE") .attr("stroke", "#7E85F5") .attr("stroke-width", 1) .attr("r", 4); node.append("text") .attr("dy", "1.5em") .attr("x", d => 0) .attr("text-anchor", d => "middle") .text(d => d.data.name) .attr("fill", "#A7A7A7") .attr("font-size", "8px") .clone(true).lower(); svg .append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight]) .attr('refX', refX) .attr('refY', refY) .attr('markerWidth', markerBoxWidth) .attr('markerHeight', markerBoxHeight) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()(arrowPoints)) .attr('stroke', '#D5D5D5') .attr('fill', '#D5D5D5'); return svg.node(); }