Карты Google с цветовой шкалой 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);
    });

Однако я вижу только черные квадраты над картой. Я могу настроить их на один и тот же цвет, но я пытаюсь сделать их похожими на тепловую карту без использования тепловой карты googles.

Код основан на 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)]);

remove

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)            
  });