使用我目前正在建設一個地區分佈圖中角2以下作爲指導: http://cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/1359瞭解d3.scaleQuantile()的地區分佈圖
到目前爲止一切正常,除了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)
});
}
什麼'csvData'的價值?它看起來可能會有一個解析錯誤,因爲你正在將'csvData [i] ['PROP']'轉換爲一個數字。 –
'csvData'變量是csv數據,其名稱和編號應用於每個狀態。我仔細查看了一下,並做了一堆控制檯日誌語句,以查看正在傳遞的內容並將其檢出。這是範圍函數,似乎只需要一個數組數組,而不是一個字符串數組。 – mikey8989
對於您發佈的代碼塊,您可以調用'd3.scaleQuantile()。range(range)',但'range'在該點處是一個空數組。那是你遇到問題的地方嗎?還是在別的地方,你沒有發佈代碼? –