D3.js 显示光栅和矢量答案

【问题标题】：D3.js Display raster and vectorD3.js 显示光栅和矢量
【发布时间】：2017-11-30 16:34:34
【问题描述】：

我正在尝试修改 Mike Bostock 的示例 (http://bl.ocks.org/mbostock/5914438)，该示例覆盖了 OpenStreetMap 上的矢量 topojson。是否可以使用 Google Map 而不是 OpenStreetMap 修改此示例？

以下加载谷歌地图：

function initMap() {
    map = new google.maps.Map(d3.select("#map").node(), {
        zoom: 4,
        center: new google.maps.LatLng(38.68551, -96.503906),       
        mapTypeId: google.maps.MapTypeId.SATELLITE                     
    });
    map.setOptions({ draggableCursor: 'default' });
}

我有一个 d3.js 版本 3，它通过谷歌地图加载 geojson 文件。但是现在我需要一些仅在 d3.js 版本 4 中才能找到的动画功能，而我的 d3.js v3 代码不起作用。以下是我的 d3.js 版本 3 代码：

function drawConusCounties() {        
    var cntyPath = "/geo/conus_counties.json";

    d3.json(cntyPath, function (error, data) {
        if (error) throw error;

        $(function () {
            var overlay = new google.maps.OverlayView();

            overlay.onAdd = function () {
                var layer = d3.select(this.getPanes().overlayLayer).append("div")
                    .attr("class", "cnty");

                var svg = layer.append("svg");
                var cnty = svg.append("g").attr("class", "cnty");

                overlay.draw = function () {
                    var markerOverlay = this;
                    var overlayProjection = markerOverlay.getProjection();

                    // Turn the overlay projection into a d3 projection
                    var googleMapProjection = function (coordinates) {
                        var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
                        var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
                        return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
                    }

                    path = d3.geo.path().projection(googleMapProjection);

                    cnty.selectAll("path")
                        .data(d3.entries(data)[1].value)
                        .attr("d", path) // update existing paths
                    .enter()
                        .append("svg:path")
                        .attr("class", "cnty5")
                        .attr("cntyname", function (d, i) {
                            return d3.entries(data)[1].value[i].properties.NAME;
                        })
                        .attr("d", path);
                }; //end overlay draw
            }; //end onAdd

            overlay.setMap(map);
        }); //end function call

    }); //end d3 call
}

【问题讨论】：

您需要 v4 中哪些动画功能在 v3 中不存在？
我能够通过在标签内创建一个

不确定这是否是正确的方法。
我还需要做动画。如何在 Stack Overflow 中发布此线程的附加代码？在微软的论坛上很容易做到。我在这里迷路了。
您应该可以编辑问题 - 在问题的底部，这些 cmets 正上方有几个文本链接 - 一个是编辑，您可以从那里添加其他代码和信息跨度>
我的动画包含每隔 3 天为美国大陆收集的田间条件（径流、水分等）数据。所以我想在用户从下拉列表中选择字段条件时启动动画。

标签： d3.js

【解决方案1】：

此时，我正在使用 d3.js 版本 3 对 Google 地图进行叠加。我认为版本 4 中更改了一些覆盖函数名称，我需要研究这些名称。但是，我可以通过简单地调用 initMap() 函数中的覆盖函数来覆盖，如下所示：

function initMap() {
    $('#SvgOverlay').hide();

    map = new google.maps.Map(d3.select("#map").node(), {
        zoom: 4,
        center: new google.maps.LatLng(38.68551, -96.503906),       
        mapTypeId: google.maps.MapTypeId.SATELLITE                     
    });
    map.setOptions({ draggableCursor: 'default' });

    drawConusCounties();
} //end function call

【讨论】：