第一個D3js的圓

D3js基本環境

前面有提到Observablehq，但有些特別的語法需要先了解，所以直接使用Codepen，並引入D3 v6.1.1。

畫圓

畫圓形可以使用SVG元件中的circle並使用cx, cy, r等屬性來控制那個圓。

預期的輸出樣子如下。

// html
<circle
    cx="50"
    cy="50"
    r="10"
>
</circle>

1. 選取要放置圓型的基本DOM。我們終究要把我們的圓放上html，一開始就直接先放一個svg根DOM，之後的SVG元件們都會從這根DOM長出來。

// html
<svg></svg>

// javascript
const svg = d3.select('svg');

語法類似jQuery選取DOM的方式，select後接的就是document.querySelector後的選取器格式，d3 select，其實也就是用這方法，詳見原始碼。

select.js

2. 使用d3建構一個圓型並顯示。

// javascript
const svg = d3.select('svg');
svg.append('circle')
    .attr('cx', 50)
    .attr('cy', 50)
    .attr('r', 10);

感覺與jQuery寫法類似，鏈狀使用，透過append的方式，可以在此Selection的物件中掛上我們需要的元件。

append.js

3. 燈愣!

Selection

透過d3.select選取的元素，會在select函式中包裝成Selection這一物件，就可調用各種d3 Selection的API

select.js

attr

透過此Selection中的attr API，可以將該元件增加屬性，不論svg元件或其他DOM都行！

attr.js

結論

基本D3畫圖非常簡單，不只用append的方式新增元件，還可以用d3.create的方式建立元件，但需考慮到namespace的小問題，覺得比較麻煩一點，暫時不用。

以下是關於d3.create的問題以及解答。
https://stackoverflow.com/questions/63966402/d3-js-use-d3-create-element-cant-show-in-svg-tag/63966461#63966461