D3.jsで<g>要素を活用する - Qiita
const nameFormat = d3.format('02d'); const data = d3.shuffle(d3.range(0, 20)).map((d, i) => { return { name: `name-${nameFormat(d)}`, value: Math.round(Math.random() * 100), }; }); const size = { width: window.innerWidth, height: window.innerHeight }; const margin = {top: 10, right: 10, bottom: 10, left: 40}; const svg = d3.select('#chart') .attr('width', size.width) .attr('height', size.height);
D3.js｜enter、update、exit の使い方
こちらのサイト（Thinking with Joins）を参考に、D3.jsの enter、update、exit の使い方をまとめました。 １．enter、update、exit の各役割を簡単にまとめると enter 新しく生成した要素を扱います。 例えば、新しくdiv要素を生成した場合、div要素へ更新内容を反映します。 なので、新しく生成した要素に enter を使用しない場合、更新が反映されないのでブラウザに更新内容が表示されません。 update 既存の要素を扱います。 例えば、既存のdiv要素になんらかの変更を行った場合、div要素へ更新内容を反映します。 exit 既存の余分な要素を扱います。 例えば、div1、div2、div3 という要素があり、 div1、div2のみ更新しdiv3は必要ない場合は、何もしないとdiv3も残り続けるので、exit().remove();
D3.js v5 入門｜#4 円の描画
１．要素の追加 まずは、svg要素のみ定義されたhtmlに、次の３つの円を追加します。 Demoを表示 １−１．ソースコード 円を追加するには次のようにします。 <body> <svg width="700px"></svg> <script> d3.select("svg").selectAll("circle") // ① svg要素を選択し、その子要素のcircle要素を全て選択 .data([10, 20, 30]) // ② 追加するデータ（今回は円の半径として使用） .enter() // ③ 新規追加する circle要素を DOMに反映 .append("circle") // ④ 円を追加 .attr("cy", 60) // ⑤ y軸の座標 .attr("cx", function(d, i) { return i * 100 + 100; }) // ⑥ x軸の座標
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Customizing d3.js chart | the D3 Graph Gallery
