色彩 Colors

d3.color(specifier)

程式碼

          
            d3.color("red");
            // return {
            //     "r": 255,
            //     "g": 0,
            //     "b": 0,
            //     "opacity": 1
            // }
      
            d3.color("#000");
            // return {
            //     "r": 0,
            //     "g": 0,
            //     "b": 0,
            //     "opacity": 1
            // }
color.formatRgb( )、color.formatHsl( )

程式碼

          
          const purpleFormatRgb = d3.color("purple").formatRgb();
          //rgb(128, 0, 128)
    
          const purpleFormatHsl = d3.color("purple").formatHsl();
          // hsl(300, 100%, 25.098039215686274%)
color.opacity

程式碼

          
            d3.color("rgba(0,0,0,0.5)").opacity; // return 0.5
color.brighter([k])

程式碼

          
            d3.color("purple").brighter(0.8);
              // return {
              //     "r": 170.26741304591317,
              //     "g": 0,
              //     "b": 170.26741304591317,
              //     "opacity": 1
              // }
color.darker([k])

程式碼

          
            d3.color("purple").darker(0.5);
              // return {
              //     "r": 107.09248339636167,
              //     "g": 0,
              //     "b": 107.09248339636167,
              //     "opacity": 1
              // }
d3.rgb(r, g, b[, opacity])

程式碼

          
            // 數字參數
            d3.rgb(255, 0, 0);

            // 文字參數
            d3.rgb("red");

            // return {
            //     "r": 255,
            //     "g": 0,
            //     "b": 0,
            //     "opacity": 1
            // }
d3.hsl(h, s, l[, opacity])

程式碼

          
            // 文字參數
            d3.hsl("red");
            // return {
            //     "h": 0,
            //     "s": 1,
            //     "l": 0.5,
            //     "opacity": 1
            // }