javascript - 将数据弹出窗口添加到 d3js map

Question

我正在使用 Data-Driven Documents整合JSON数据 Google maps . JavaScript在车站位置叠加一个圆圈和标签。 Here is an example.

Here is JavaScript file

Here is JSON file

除了站点位置的 LatLng 之外，JSON文件包括土壤化学数据。以下是车站位置 24 的示例: "24": { "latitude": 31.967240000000004, "longitude": -111.09028, "pH Buffer": 0.0, "pH": 7.53, "Aluminum": 25.28, "Antimonies": 0.32, "Arsenic ": 0.08, "Barium": 46.27, "Beryllium": 0.2, "Boron": 0.66, "Cadmium": 0.03, <more> "Zinc": 0.15 },

JSON文件将更新为在引号中编码化学数据，连同测量符号 - (mg/kg)。

如何更新JavaScript揭示关于 mouseover 的化学信息.

希望实现与 US Congressional Districts 相同的效果和 New York Times .

两者都在 mouseover 上实现弹出信息(纽约时报)或 mouseclick (美国国会选区)。

就美国国会选区而言， map 和弹出窗口是使用 GitHub 服务呈现的。 GeoJSON 中信息的子集文件在弹出窗口中提供。

例如:"properties": {"startcong": "103", "district": "0", "statename": "Wyoming", "endcong": "112", "id": "056103112000"}

在弹出的表格中显示:

| startcong | 103             |
| district  | 0               |
| statename | Wyoming         |
| member    | [object Object] |
| endcong   | 112             |
| id        | 056103112000    |

想要集成类似于 GitHub 使用的服务，但对于独立的 HTML + JS文件。

Answer 1

Google map 不提供高度的灵 active 来自定义其 map 。纽约时报和美国国会选区的例子没有使用谷歌地图。纽约时报使用美国阿尔伯斯 map 的直接 SVG 文件。

也就是说，谷歌地图事件处理程序可以通过禁用它们来覆盖。在 map 选项中添加 disableDoubleClickZoom: true

var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(32.96,  -111.090),
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDoubleClickZoom: true,
scrollwheel: false
});

同时将 overlayLayer 更改为 overlayMouseTarget

var layer = d3.select(this.getPanes().overlayMouseTarget).append("div")

现在向 map 上表示的圆圈添加工具提示。我更喜欢使用 d3.tips

var tip = d3.tip()
              .attr('class', 'd3-tip')
              .offset([+20, -20])
              .html(function(d) {
                console.log(d);
                return "<span style='color:blue'>"+JSON.stringify(d.value)  + "</span>";
              })


// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("mouseover",tip.show)
.on("mouseout", tip.hide)
.call(tip);