31:T663,chart = { console.clear(); const svg = d3.select("svg"); svg.selectAll("g, line").remove(); let areaLayer = svg .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); let linesLayer = svg .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); let markersLayer = svg .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); let path = areaLayer .append("path") .datum(data) .attr("fill", "pink") .attr("d", area); let circles = markersLayer .selectAll("circle") .data(data) .join("g"); circles .append("circle") .attr("id", d => "circle-" + d.x) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", r) .style("stroke", "white"); let highlightedPoints = [3, 30]; highlightedPoints.forEach(function(point) { console.log(point); let circle = d3.select("#circle-" + point); let text = d3.select("#ref-point-" + point); let textNode = text.node(); let svgNode = svg.node(); let bbText = textNode.getBoundingClientRect(); let bbSVG = svgNode.getBoundingClientRect(); let padding = 17; let lessXSVG = -(margin + padding); let plusXText = bbText.x; let x2 = lessXSVG + plusXText + bbText.width / 2; let y2 = -(bbSVG.top - bbText.top); let arrow = linesLayer .append("line") .attr("x1", circle.attr("cx")) .attr("y1", circle.attr("cy")) .attr("x2", x2) .attr("y2", y2) .style("fill", "none") .style("stroke", "blue") .style("stroke-dasharray", "2,2"); }); }32:[] 2f:{"title":"SVG overflow visible","cells":[{"id":0,"value":"md`# SVG overflow visible`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"html`

This is a test on how to use SVG overflow visible to have nice links between words, sentences and paragraphs with data in charts.

\n\n

Highlight point 3.

\n\n

Highlight point 30.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"svgNode = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.attr(\"overflow\", \"visible\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"r = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"n = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"chartHeight = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"height = chartHeight + 2 * margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"margin = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"chartWidth = width - 2 * margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"area = d3\n .area()\n .x(d => x(d.x))\n .y0(y(0))\n .y1(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"x = d3\n .scaleLinear()\n .domain([0, n])\n .range([0, chartWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"y = d3\n .scaleLinear()\n .domain([0, max])\n .range([chartHeight, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"min = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"max = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = {\n let arr = [];\n\n for (var i = 0; i < n; i++) {\n let obj = {};\n obj.x = i;\n obj.y = d3.randomInt(min, max)();\n arr.push(obj);\n }\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-random@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}