瞭解d3.scaleQuantile（）的地區分佈圖

Question

使用我目前正在建設一個地區分佈圖中角2以下作爲指導： http://cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/1359

到目前爲止一切正常，除了d3.scaleQuantile().range()功能。

在d3版本3中，上述函數曾經是d3.scale.quantile().range()。

在上述使用版本3的地圖教程中，d3.scale.quantile().range()接受顏色列表：[「#D4B9DA」,「#C994C7」, 「#DF65B0」, 「#DD1C77」, 「#980043」]。然而，這似乎並不適用於新d3.scaleQuantile().range()功能版本4，當我把在同一列表中。

控制檯給人的Type 'string' is not assignable to type 'number'.)和Webstorm一個錯誤，該錯誤說Argument types do not match parameters

如果有人可以指示我如何使用範圍函數來設置顏色的正確方向，我將不勝感激。下面代碼的相關部分。

colorScale(csvData: any): any { 

    var range = []; 

    var color = d3.scaleQuantile() 
     .range(range); 

    var domainArray = []; 

    for (var i in csvData){ 
     domainArray.push(Number(csvData[i]["PROP"])); 
    }; 

    //pass array of expressed values as domain 
    color.domain(domainArray); 

    return color; //return the color scale generator 
} 

choropleth(d: any, recolorMap: any): any{ 

    //get data value 
    var value = d.properties["PROP"]; 
    //if value exists, assign it a color; otherwise assign gray 
    if (value) { 
     return recolorMap(value); 
    } else { 
     return "#ccc"; 
    }; 
}; 

buildMap(csvData: any){ 
    //code removed to keep short 
    var recolorMap = this.colorScale(csvData); 

    this.g = this.svg.append("g") 
      .selectAll("path") 
      .data(xFeatures) 
      .enter() 
      .append("path") 
      .attr("d", this.geoPath) 
      .style("fill", (d) => { //color enumeration units 
       return this.choropleth(d, recolorMap) 
      }); 
} 

Answer 1

如果任何人都可以在如何使用範圍 函數來設置顏色指向正確的方向，我將不勝感激。

從API documentation：

如果指定範圍內，設定在該範圍的離散值。 數組不能爲空，並且可能包含任何類型的值。

所以，你應該能夠在D3 V4使用字符串範圍數組中的位數的規模，如果沒有，有可能是一個不同的問題：

var scale = d3.scaleQuantile().domain([0,99]).range(["steelblue","#aaa","lightgreen"]); 
 

 
var svg = d3.select('body').append('svg').attr('width',500).attr('height',300); 
 

 
var rects = svg.selectAll('rect') 
 
    .data(d3.range(100)) 
 
    .enter() 
 
    .append('rect') 
 
    .attr('width',18) 
 
    .attr('height',18) 
 
    .attr('fill', function(d,i) { return scale(i); }) 
 
    .attr('x', function(d,i) { return i%10 * 20 + 30; }) 
 
    .attr('y', function(d,i) { return Math.floor(i/10) * 20 + 30; }); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

這其他尺度也應該如此。比如，如果你想有超過使用閾值規模在等值線使用的閾值控制：

var scale = d3.scaleThreshold().domain([10,25,90]).range(["#bae4bc","#7bccc4","#2b8cbe","#0868ac"]); 
 

 
var svg = d3.select('body').append('svg').attr('width',500).attr('height',300); 
 

 
var rects = svg.selectAll('rect') 
 
    .data(d3.range(100)) 
 
    .enter() 
 
    .append('rect') 
 
    .attr('width',18) 
 
    .attr('height',18) 
 
    .attr('fill', function(d,i) { return scale(i); }) 
 
    .attr('x', function(d,i) { return i%10 * 20 + 30; }) 
 
    .attr('y', function(d,i) { return Math.floor(i/10) * 20 + 30; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>