chart = { const dummyNode = { name: "dummy", color: "#fff" }; const markerBoxWidth = 4; const markerBoxHeight = 4; const refX = markerBoxWidth / 2; const refY = markerBoxHeight / 2; const markerWidth = markerBoxWidth / 2;FileAttachment("flare-2@3.json") const markerHeight = markerBoxHeight / 2; const arrowPoints = [[0, 0], [0, 4], [4, 2]]; const root = tree(data); const tooltip = d3.select("body") .insert("div") .attr("class", "top-tooltip") .html(``) .style("opacity", .9) .style("position", "absolute"); 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", 2) .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("class", "link"); link .clone() .attr('stroke', 'transparent') .attr('stroke-width', 15) .on("mouseover", function(d) { tooltip.transition() .duration(200) .style("opacity", .9) .style("left", (window.event.pageX+ 10) + "px") .style("top", (window.event.pageY + 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }) .on('mousemove', function(d) { tooltip.transition() .duration(200) .style("opacity", .9) .style("left", (window.event.pageX + 10) + "px") .style("top", (window.event.pageY + 28) + "px"); }); link.attr('marker-start', 'url(#arrow)') 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", (d) => { if (d.data.name === dummyNode.name) { return dummyNode.color; } return "#EDF0FE"; }) .attr("stroke", (d) => { if (d.data.name === dummyNode.name) { return dummyNode.color; } return "#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 => { if (d.data.name === dummyNode.name) { return ""; } return 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(); }