D3.jsのチェックボックスの背景色設定
2022年6月29日
仕事上､階層ツリー表示したい場面があり､D3.jsを使いツリー表示する以下サンプルを活用させていただいた｡
チェックボックスで選択でき､チェックした値を収集してくれる優れもの｡
ただ､データが多くなってくると､どれをチェックしたか分かりづらくなってくる｡
そこでチェックした項目の背景色を設定することを考えたのだが､これが四苦八苦｡
苦労の成果をメモ｡
上述ページにあるrenderNodeファンクション部分を以下のように変更した｡
function renderNode(selection, rcd) {
selection.append('input')
.attr('type', 'checkbox')
.on('change', function () {
let ckbox = d3.selectAll("input[type='checkbox']")
.each( function( d, i ) {
this.parentNode.style="background-color:white";
} ) ;
let ckedbox = d3.selectAll("input[type='checkbox']:checked")
.each( function( d, i ) {
this.parentNode.style="background-color:orange";
} ) ;
d3.select('#selected')
.text(checkboxValues(d3.select('#view')));
});
selection.append('span')
.text(rcd.id);
}5～12行目が変更箇所｡
d3.selectAllでチェック箇所を一括選択でるのだが､選択されているのはINPUTタグ｡
INPUTタグではなく､親要素のSPANの背景色を変えたかったのだが､この親要素取得で手間取った｡
ここは一括選択できなく､eachで繰り返し取得､背景色設定する他なかった･･･｡
実行結果は以下の通り｡
- u1kuni
- ついに100km走破 2024年6月30日
- 高校入学 2024年4月15日
- 高校合格 2024年3月28日
- 映画｢ソウルメイト/七月と安生｣を観て 2024年3月27日
- 中学卒業 2024年3月10日
