带有 d3.js（v5）色标的谷歌地图不起作用答案

【问题标题】：Google maps with d3.js (v5) color scale not working带有 d3.js（v5）色标的谷歌地图不起作用
【发布时间】：2020-10-06 02:51:50
【问题描述】：

我正在做一个项目，其中有一个如下所示的 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

我们将不胜感激。

【问题讨论】：

count 只是一个数字。因此，.style('fill', function(d) {return d.count}) 行将不起作用。假设您的规模有效，您可能需要.style('fill', function(d) {return colorScale(d.count)})。

标签： javascript arrays json google-maps d3.js

【解决方案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))

将 colorScale 添加到 'rect'

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

【讨论】：