如何像列表一样显示SVG标题内容，而不是直线

Question

我正在使用SVG创建离散的传奇，在该传说中，我将标题附加到rect上，以显示悬停的内容，但标题的内容以直线显示，我想一个又一个又一个类似的列表。例如：内容1第一行内容2，依此类推。

代码段的一部分：

//有一个我正在附加的div svg

<div id="legend" ref={divRef}></div>
const currentDiv = select(divRef.current);

// creating svg
currentDiv
.append("svg")
.attr("viewBox", `0 0 ${count} 1`)
.attr("preserveAspectRatio", "none")

g.selectAll("g.legendCells")
.data(data)
.enter()
.append("g")
.append("rect")
.append("title")
.append("span")
.text(legendValues) // this is title content (array items)

//i.sstatic.net/9Mygg.png“ alt =” inter taimy Description在此处“>

fiddle链接： https://jsfiddle.net/r4lafyjs/

基本上标题是阵列值，例如格式：

0: "Content_0"
1: "Content_1"
2: "Content_2"
3: "Content_3"

必须显示在悬停在rect cell上，索引：content：content