带有 d3.js (v5) 色阶的谷歌地图不起作用

Question

我正在做一个项目，其中我有一个看起来像这样的 JSON：

[
{
"lat": 53.1521596106757,
"lon": -0.486577431632087,
"size": 3598,
"field": "TestField",
"variety": "TestVariety",
"count": 67
},
{
"lat": 53.1521596106757,
"lon": -0.486287281632087,
"size": 4077,
"field": "TestField",
"variety": "TestVariety",
"count": 73
}
]

我正在尝试使用以下代码将色阶映射到"计数"：

let testField = new google.maps.LatLng(53.1501, -0.4895);
const map = new google.maps.Map(d3.select('#map').node(), {
zoom: 17,
center: testField,
mapTypeId: 'satellite',
streetViewControl: false,
mapTypeControl: false,
});
//colour scale
const colorScale = d3.scaleSequential(d3.interpolateBlues);
d3.json('/field_example.json')
.then(data => {
let countInfo = data.map(function (testVariety) {
return testVariety.count;
})
console.log(data)
console.log(countInfo);
colorScale.domain(data.map(d => d.countInfo))
//create overlay
const overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function () {
const layer = d3.select(this.getPanes().overlayLayer).append('div')
.attr('class', 'panes');
// Draw each marker as a separate SVG element.
overlay.draw = function () {
const projection = this.getProjection(),
padding = 10;
const marker = layer.selectAll('svg')
.data(data)
.each(transform) // update existing markers
.enter().append('svg')
.each(transform)
.attr('class', 'marker')
//add a rect
marker.append('rect')
.attr('height', 15)
.attr('width', 15)
// .style('fill', 'steelblue');
.style('fill', function(d) {return d.count})      
function transform(d) {
d = new google.maps.LatLng(d.lat, d.lon);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style('left', (d.x - padding) + 'px')
.style('top', (d.y - padding) + 'px')
}
};
};
// Bind overlay to the map
overlay.setMap(map);
});

但是，我只在地图上看到黑色方块。我可以将它们调整为所有相同的颜色，但我试图让它看起来像一个热图，而不使用谷歌的热图。

该代码基于 https://bl.ocks.org/mbostock/899711

帮助将不胜感激。

Answer 1

在 overlay.draw = function (( {} 中添加以下内容

//colourscale
let colorScale = d3.scaleSequential(d3.interpolateTurbo)
.domain([0, d3.max(data, d => d.count)]);

删除

colorScale.domain(data.map(d => d.countInfo))

将颜色刻度添加到"矩形">

//add a rect
marker.append('rect')
.attr('height', 15)
.attr('width', 15)
.attr('fill', function (d) {
return colorScale(d.count)            
});