31:T68b,# SVG text wrapping The wrap function below is based on [one by Mike Bostock](https://bl.ocks.org/mbostock/7555321). It takes a D3 selector of text elements and wraps the text into tspan elements. With a D3 text selection called text, you can call the function like this: text.call(wrap, width, dyAdjust, lineHeightEms, lineHeightSquishFactor, splitOnHyphen, centreVertically) ## The <text> element needs x and y attributes It's necessary to set the x and y attributes on each <text> element (even if just to 0) before calling the wrap function. Otherwise, some lines of text may be positioned incorrectly. ## Parameters: - width: The maximum width of a label. (This may be exceeded if an individual word is longer than this width.) - dyAdjust: Add this many ems to the y position of each label. A value of .35 seems to work well. (Using the SVG dominant-baseline attribute is probably better but I don't think it works in IE11.) - lineHeightEms: The vertical distance in ems from the top of one line to the top of the next line. - lineHeightSquishFactor: If this equals 1, it does nothing. If it is less than 1, it squishes the lines together a bit more if a label has three or more lines of text. - splitOnHyphen: Allow a word to be split just after a hyphen? (Default: true) - centreVertically: Centre-align the text vertically? (Default: true) The final four parameters are optional.32:T67e,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); document.body.appendChild(svg.node()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); var circles = svg .append("g") .selectAll("circle") .data(chartData) .enter() .append("circle") .attr("cx", function (d) { return x(d.x); }) .attr("cy", function (d) { return y(d.y); }) .attr("r", 1.5) .attr("fill", "#ccc") .attr("stroke", "#888"); var line = svg .append("g") .selectAll("line") .data(chartData) .enter() .append("line") .attr("x1", function (d) { return x(d.x) + (alignment.name === "Left" ? xPadding : -xPadding); }) .attr("x2", function (d) { return ( x(d.x) + (alignment.name === "Left" ? 1 : -1) * (xPadding + labelWidth) ); }) .attr("y1", function (d) { return y(d.y); }) .attr("y2", function (d) { return y(d.y); }) .attr("stroke", "#eee") .attr("stroke-width", 3); var text = svg .append("g") .selectAll("text") .data(chartData) .enter() .append("text") .attr("text-anchor", alignment.textAnchor) .attr("x", function (d) { return x(d.x) + (alignment.name === "Left" ? xPadding : -xPadding); }) .attr("y", function (d) { return y(d.y); }) .attr("fill", "steelblue") .text(function (d) { return d.LAD21NM; }) .call( wrap, labelWidth, dyAdjust, lineHeight, lineHeightSquishFactor, splitOnHyphen, centreVertically ); return document.body.removeChild(svg.node()); }33:T9ad,function wrap( text, width, dyAdjust, lineHeightEms, lineHeightSquishFactor, splitOnHyphen, centreVertically ) { // Use default values for the last three parameters if values are not provided. if (!lineHeightEms) lineHeightEms = 1.05; if (!lineHeightSquishFactor) lineHeightSquishFactor = 1; if (splitOnHyphen == null) splitOnHyphen = true; if (centreVertically == null) centreVertically = true; text.each(function () { var text = d3.select(this), x = text.attr("x"), y = text.attr("y"); var words = []; text .text() .split(/\s+/) .forEach(function (w) { if (splitOnHyphen) { var subWords = w.split("-"); for (var i = 0; i < subWords.length - 1; i++) words.push(subWords[i] + "-"); words.push(subWords[subWords.length - 1] + " "); } else { words.push(w + " "); } }); text.text(null); // Empty the text element // `tspan` is the tspan element that is currently being added to var tspan = text.append("tspan"); var line = ""; // The current value of the line var prevLine = ""; // The value of the line before the last word (or sub-word) was added var nWordsInLine = 0; // Number of words in the line for (var i = 0; i < words.length; i++) { var word = words[i]; prevLine = line; line = line + word; ++nWordsInLine; tspan.text(line.trim()); if (tspan.node().getComputedTextLength() > width && nWordsInLine > 1) { // The tspan is too long, and it contains more than one word. // Remove the last word and add it to a new tspan. tspan.text(prevLine.trim()); prevLine = ""; line = word; nWordsInLine = 1; tspan = text.append("tspan").text(word.trim()); } } var tspans = text.selectAll("tspan"); var h = lineHeightEms; // Reduce the line height a bit if there are more than 2 lines. if (tspans.size() > 2) for (var i = 0; i < tspans.size(); i++) h *= lineHeightSquishFactor; tspans.each(function (d, i) { // Calculate the y offset (dy) for each tspan so that the vertical centre // of the tspans roughly aligns with the text element's y position. var dy = i * h + dyAdjust; if (centreVertically) dy -= ((tspans.size() - 1) * h) / 2; d3.select(this) .attr("y", y) .attr("x", x) .attr("dy", dy + "em"); }); }); }34:[{"id":"034da20d86ab09ff9255b72c9502c3f90169d536e59d7461fb8755413583786e6b28afb1db6fc3b49f40f3a663681051f9a2f837fa7c23cfafc70da9aefebf0c","href":"https://static.observableusercontent.com/files/034da20d86ab09ff9255b72c9502c3f90169d536e59d7461fb8755413583786e6b28afb1db6fc3b49f40f3a663681051f9a2f837fa7c23cfafc70da9aefebf0c","name":"fake_data.csv","type":"text/csv","lastModified":1641550077994.826,"size":26098}] 2f:{"title":"SVG text wrapping","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"viewof labelWidth = Inputs.range([4, 150], {\n label: \"width\",\n step: 2,\n value: 70\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"viewof dyAdjust = Inputs.range([0, 1], {\n label: \"dyAdjust\",\n step: 0.05,\n value: 0.35\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof lineHeight = Inputs.range([0.4, 2], {\n label: \"lineHeightEms\",\n step: 0.05,\n value: 1.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof lineHeightSquishFactor = Inputs.range([0.8, 1], {\n label: \"lineHeightSquishFactor\",\n step: 0.01,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof splitOnHyphen = Inputs.toggle({ label: \"splitOnHyphen\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof centreVertically = Inputs.toggle({\n label: \"centreVertically\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"alignment = alignmentOptions[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"alignmentOptions = [\n { name: \"Left\", textAnchor: \"start\" },\n { name: \"Right\", textAnchor: \"end\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"xPadding = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"x = d3\n .scaleLinear()\n .domain([-.3, 1.3])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"y = d3\n .scaleLinear()\n .domain([-0.02, 1.02])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"chartData = allData\n .slice(0, 10)\n .concat(allData.filter((d) => d.LAD21NM.length > 20))","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"allData = FileAttachment(\"fake_data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}