說明如何在 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() 設定內容的用法。