[D3.js] 透過 .text() 插入文字內容

說明如何在 D3.js 插入文字內容要使用 .text() 的方法，用一些範例來說明。

首先我們如果有像這樣的 html：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

透過 d3 選取後就可以利用 text() 插入內容：

d3.selectAll(".box").text("hello");

結果如下：

不過 D3 的好用之處還是在於跟資料結合與產出 HTML 內容，首先來看一下用 D3 產出一個 text 的區塊並給予內容：

HTML 部分：

 <svg width="500" height="300"></svg>

js：

const svg=d3.select("svg");
        svg.append('text')
            .text('Hello World')
            .attr('x', 100)
            .attr('y', 100)

結果：

不過以上的範例的資料是寫死的，這邊示範跟 data 結合的方法：

const svg=d3.select("svg");

        const data = [25, 30, 45, 60, 20, 65, 75];

        
        svg.selectAll("text").data(data)
            .enter()
            .append('text')
            .text(d => d)
            .attr('x', (d, i) => i * 70)
            .attr('y', 30)
            .attr('font-size', '20px')

以上的範例透過 data 把資料 append 的 svg 內，並設定位置避免會疊在一起。

得到的結果如下：

以上就是基礎D3.js 透過 text() 設定內容的用法。