D3.js schemePuOr[]函数

d3.schemePuOr[]函数是 d3.js 中发散配色方案的一部分，用于返回与“PuOr”发散配色方案中的颜色对应的 HEX 代码颜色字符串。

句法：

d3.schemePuOr[k];

参数：此函数接受如上所述和如下所述的单个参数：

• k：为3～10的任意数。

返回值：它返回颜色的十六进制代码。

以下示例说明了 D3.js 中的 d3.schemePuOr[]函数：

示例 1：

HTML

  

    
    
    
    
    
    
    
    
    
    

  

    Geeks for geeks
  
    Different colors from schemePuOr are: 
  
    
        document.write("<p><b>" 
            + d3.schemePuOr[10][9] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePuOr[10][5] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePuOr[10][4] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePuOr[10][3] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePuOr[10][2] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePuOr[10][1] + "</p></b>");
        document.write("<p><b>" 
            + d3.schemePuOr[10][0] + "</p></b>"); 
    

  

输出：

示例 2：

HTML

  

    
    
    
    
    
    
    
    
    
    
    
  
    
        div {
            padding: 6px;
            color: white;
            text-align: center;
            vertical-align: middle;
            display: flex;
            justify-content: center;
            width: fit-content;
            margin-top: 2px;
            height: 20px;
        }
    

  

    GeeksforGeeks
  
    D3.schemePuOr[k] 
    
        d3.schemePuOr[10][9]
    
    
        d3.schemePuOr[10][5]
    
    
        d3.schemePuOr[10][4]
    
    
        d3.schemePuOr[10][2]
    
    
        d3.schemePuOr[10][0]
    
      
    
        // creating different colors 
        // for different value of k
        let color1 =
            d3.schemePuOr[10][0];
        let color2 =
            d3.schemePuOr[10][1];
        let color3 =
            d3.schemePuOr[10][2];
        let color4 =
            d3.schemePuOr[10][3];
        let color5 =
            d3.schemePuOr[10][4];
  
        // Selecting Div using query selector
        let box1 = document.querySelector(".box1");
        let box2 = document.querySelector(".box2");
        let box3 = document.querySelector(".box3");
        let box4 = document.querySelector(".box4");
        let box5 = document.querySelector(".box5");
  
        // Setting style and BG color of
        // the particular DIVs
        box1.style.backgroundColor = color1;
        box2.style.backgroundColor = color2;
        box3.style.backgroundColor = color3;
        box4.style.backgroundColor = color4;
        box5.style.backgroundColor = color5;
    

  

输出：