如何使用 d3.js 按單個單詞分隔和包裝 SVG 文本元素？

Question

我有以下單詞和顏色數組：

let dat = [{"word": "Lorum", "color": "red"}, 
     {"word": "ipsum", "color": "green"},
     {"word": "dolor", "color": "blue"},
     {"word": "sit", "color": "purple"},
     {"word": "amet", "color": "yellow"},
     {"word": "consectetur", "color": "orange"},
     {"word": "adipiscing", "color": "red"},
     {"word": "elit", "color": "purple"},
     {"word": "sed", "color": "blue"},
     {"word": "eiusmod", "color": "blue"},
     {"word": "tempor", "color": "green"}];

使用 d3.js，我想：（1）沿着 x 軸均勻地間隔這些單詞； (2) 根據給定的寬度將單詞相應地換行（將單詞移到下一行）。

我在這里開始了一個 jsfiddle，但現在所有的詞都共享 x 和 y 坐標。 我希望它作為一個句子出現。

Answer 1

添加了以下代碼，它將使用foriegnObject像我們在 HTML 中那樣附加數據。 現在只需很少的操作，我就添加了具有所需顏色屬性的span標簽。

 const width = 400, height = 400; let svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) let dat = [{ "word": "Lorum", "color": "red" }, { "word": "ipsum", "color": "green" }, { "word": "dolor", "color": "blue" }, { "word": "sit", "color": "purple" }, { "word": "amet", "color": "yellow" }, { "word": "consectetur", "color": "orange" }, { "word": "adipiscing", "color": "red" }, { "word": "elit", "color": "purple" }, { "word": "sed", "color": "blue" }, { "word": "eiusmod", "color": "blue" }, { "word": "tempor", "color": "green" } ]; const a = svg.append("foreignObject") .attr("width", 300) .attr("height", 200) .append("xhtml:body") .append('div') .attr('id', 'foriegnBody') .style("font", "14px 'Helvetica Neue'") for (const data of dat) { const value = document.getElementById('foriegnBody').innerHTML; if (value) { a.html(`${value} <span style="color: ${data.color}">${data.word}</span>`) } else { a.html(`<span style="color: ${data.color}">${data.word}</span>`) } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>