Selection

選取元素

d3.select()

select 選我1

select 選我2

select 選我3

select 選我4

select 選我5

程式碼

             
                // html
                <div class="select">
                    <p>select 選我1</p>
                    <p>select 選我2</p>
                    <p>select 選我3</p>
                    <p>select 選我4</p>
                    <p>select 選我5</p>
                </div>

          
            //JS
            // 參數帶字串
            d3.select('.select p').style('color', 'red');

            // 參數帶 node 節點
            const node = document.querySelector(".select p");
            d3.select(node).style("color", "red");

d3.selectAll()

selectAll 選我1

selectAll 選我2

selectAll 選我3

selectAll 選我4

selectAll 選我5

程式碼

          
              // html
              <div class="selectAll">
                  <p>selectAll 選我1</p>
                  <p>selectAll 選我2</p>
                  <p>selectAll 選我3</p>
                  <p>selectAll 選我4</p>
                  <p>selectAll 選我5</p>
              </div>

          
            //selectAll
            // 帶入字串
            d3.selectAll(".selectAll p").style("color", "red");

            // 或是帶入 node 節點陣列
            const nodeArray = document.querySelectorAll(".selectAll p");
            d3.selectAll(nodeArray).style("color", "red");

對元素的樣式進行調整

selection.attr( ) 調整屬性值
selection.classed( ) 調整class
selection.style( ) 調整樣式

selection.attr(name[, value])

程式碼

            
              //html
              <svg width="500" height="200" class="svgCircleWrap-attr" 
                    style="border: 1px solid rgb(96, 96, 96)">
                <circle></circle>
              </svg>

          
            //JS
            d3.select('.svgCircleWrap-attr circle')
              .attr("r", 30)
              .attr("cx", 50)
              .attr("cy", 50)
              .attr("fill", "rgb(248, 204, 61)")

如果想改變黃點點的位置，把點點從左上角移到右下角，可以用 transform 屬性來調整

程式碼

            
              //html
              <svg width="500" height="200" class="svgCircleChangePositionWrap " 
                    style="border: 1px solid rgb(96, 96, 96)">
                <circle></circle>
              </svg>

            
              //JS
              d3.select('.svgCircleChangePositionWrap circle')
                .attr("r", 30),
                .attr("cx", 50),
                .attr("cy", 50),
                .attr("fill", "rgb(248, 204, 61)"),
                .attr("transform", "translate(400,100)");

selection.classed(names[, value])

程式碼

            
              //html
              <svg width="500" height="200" 
                    class="svgCircleWrap-classed " 
                    style="border: 1px solid rgb(96, 96, 96)">
                <circle></circle>
              </svg>

            
              //CSS
              .circle {
                r: 30px;
                cx: 50px;
                cy: 50px;
              }
              .yellow {
                fill: rgb(248, 204, 61);
              }

            
              //JS
              d3.select(".svgCircleWrap-classed circle")
                .classed("yellow circle", true);

selection.style(name[, value[, priority]])

程式碼

            
              //html
              <svg width="500" height="200" 
                    class="svgCircleWrap-style " 
                    style="border: 1px solid rgb(96, 96, 96)">
                <circle></circle>
              </svg>

            
              //JS
              d3.select(".svgCircleWrap-style circle")
                .style("r", "30px")
                .style("cx", "50px")
                .style("cy", "50px")
                .style("fill", "rgb(248, 204, 61)", "important");

增減元素

selection.text([value]) 設定元素內的文字
selection.append(type) 向後加入元素
selection.insert(type[,before]) 可在指定位置加入元素
selection.remove( ) 移除元素

selection.text([value])

World

程式碼

            
              //html
              <div class="text">
                <p>Hi</p>
                <p>World</p>
              </div>

            
              //JS
              d3.select(".text")
                .text("Hello World")

selection.append(type)

原本畫面上只有 a、b、c、d 四項，現在用 selection.append API 向後加上一個 e 項目，並設定樣式

程式碼

             
                //html
                <div class="append">
                  <p>a</p>
                  <p>b</p>
                  <p>c</p>
                  <p>d</p>
                </div>

                
                    //JS
                    d3.select('.append')
                      .append('p')
                      .text('e')
                      .classed('fw-bold',true)
                      .style('color','rgb(248, 117, 61)')

selection.insert(type[,before])

原本畫面上只有 a、b、c、d 四項，現在用 selection.insert API 在指定位置 (a與b中間) 加上一個 e 項目，並設定樣式

程式碼

            
              //html
              <div class="insert">
                <p>a</p>
                <p>b</p>
                <p>c</p>
                <p>d</p>
              </div>

            
              //JS
              d3.select(".insert")
                .insert("p", "p:nth-child(2)")
                .text("e")
                .classed("fw-bold", true)
                .style("color", "rgb(248, 117, 61)");

selection.remove()

原本畫面上有 a、b、c、d 四項，現在用 selection.remove API 移除 b 項目

程式碼

            
              //html
              <div>
                <p>a</p>
                <p class="remove">b</p>
                <p>c</p>
                <p>d</p>
              </div>

            
              //JS
              d3.select('.remove')
                .remove()

我是一個p