D3.js 连续.rangeRound()函数

Continuous.rangeRound()函数用于将刻度范围设置为指定的值数组。它还将插值器设置为 interpolatorRound。舍入插值器可用于避免抗锯齿伪影。

句法：

continuous.rangeRound( [range] )

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

• [范围]：它是一个数组，包含指定域的范围。

返回值：此函数不返回任何内容。

下面的程序说明了 D3.js 中的Continuous.rangeRound()函数：

示例 1：

HTML

  

    
    
    
    
    
    
    
    
    
    

  

    Geeksforgeeks
  
    continuous.rangeRound() Function 
  
    
        var continuous = d3.scaleLinear()
            // Domain ranges -10, 0, 10
            .domain([-10, 0, 10])
            // Range for the domain
            .rangeRound([10, 20, 30, 40, 
                    50, 60, 70, 80, 90]);
  
        document.write("<br/><div>");
        document.write("<p> With rangeRound()");
        document.write("<h3>" + continuous(10) + "</h3>");
        document.write("<h3>" + continuous(2) + "</h3>");
        document.write("<h3>" + continuous(11.5) + "</h3>");
        document.write("<h3>" + continuous(-1) + "</h3>");
        document.write("<h3>" + continuous(1.15) + "</h3>");
        document.write("<h3>" + continuous(5) + "</h3></div>");
  
        var continuous = d3.scaleLinear()
  
            // Domain ranges -10, 0, 10
            .domain([-10, 0, 10])
            // Range for the domain
            .range([10, 20, 30, 40, 50, 60, 70, 80, 90])
  
        document.write("<br/><div>");
        document.write("<p> Without rangeRound()");
        document.write("<h3>" + continuous(10) + "</h3>");
        document.write("<h3>" + continuous(2) + "</h3>");
        document.write("<h3>" + continuous(11.5) + "</h3>");
        document.write("<h3>" + continuous(-1) + "</h3>");
        document.write("<h3>" + continuous(1.15) + "</h3>");
        document.write("<h3>" + continuous(5) + "</h3></div>");
    

  

输出：

示例 2：

HTML

  

    
    
    
    
    
    
    
    
    
    
  
    
        div {
            line-height: 15px;
            float: left;
            padding: 10px;
            word-wrap: break-word;
            margin-left: 10px;
            height: 200px;
            width: 300px;
        }
    

  

    Geeks for geeks
  
    continuous.rangeRound() Function 
  
    
        var continuous = d3.scaleLinear()
            // Domain ranges -10, 0, 10
            .domain([-10, 0, 10])
            // Range for the domain
            .range([10, 20, 30, 40, 50, 60, 70, 80, 90])
            .interpolate(d3.interpolateRound);
  
        document.write("<br/><div>");
        document.write(
            "<p> With range().interpolate(d3.interpolate.Round)");
        document.write("<h3>" + continuous(10) + "</h3>");
        document.write("<h3>" + continuous(2) + "</h3>");
        document.write("<h3>" + continuous(11.5) + "</h3>");
        document.write("<h3>" + continuous(-1) + "</h3>");
        document.write("<h3>" + continuous(1.15) + "</h3>");
        document.write("<h3>" + continuous(5) + "</h3></div>");
  
        var continuous = d3.scaleLinear()
            // Domain ranges -10, 0, 10
            .domain([-10, 0, 10])
            // Range for the domain
            .rangeRound([10, 20, 30, 40, 50, 60, 70, 80, 90])
  
        document.write("<br/><div>");
        document.write("<p> With rangeRound()");
        document.write("<h3>" + continuous(10) + "</h3>");
        document.write("<h3>" + continuous(2) + "</h3>");
        document.write("<h3>" + continuous(11.5) + "</h3>");
        document.write("<h3>" + continuous(-1) + "</h3>");
        document.write("<h3>" + continuous(1.15) + "</h3>");
        document.write("<h3>" + continuous(5) + "</h3></div>");
    

  

输出：