5

我想在 D3.js 的地图上组合两个数据集。

例如：

第一个数据集：.json 中的空间数据。

第二个数据集：.csv 中区域的数据

--> 当您将鼠标悬停在地图上时，工具提示应显示带有来自第二个数据集的一些数据的句子。

我能够制作地图并在 .json 文件中显示带有数据的工具提示，但是如何插入第二个数据集？

  • 我的函数中有一个创建地图的新函数？
  • 我必须采取全新的方式吗？
  • 在使用 d3.js 之前，我应该将 .json 文件与我的第二个数据集合并吗？

我很感激任何想法！:)

4

1 回答 1

4

所以，我认为您要问的是如何从 json 中获取空间数据并将其与一些单独加载的 csv 数据连接起来？

我对正在绘制的 choropleth 地图做了类似的事情，基本上我只是创建了一个拓扑元素 ID 到数据对象的地图，然后我使用拓扑元素 ID 进行了查找以获取我想要与实际绘制的地图元素相关联的任何内容（我正在使用这种方法根据 fips 国家代码设置等值线的颜色）。

所以基本上，绘制地图，以便您拥有与您希望能够悬停的每个地图元素相关联的 id。然后，在您的 mouseover/mouseout 处理程序中，您将使用该 id 来查找要在工具提示中显示的数据，并使用 svg 标题元素或 Tipsy 或手动绘制 svg 文本元素或任何显示工具提示的内容。

这里有一些关于绘制工具提示的有用参考： https : //gist.github.com/biovisualize/1016860 http://jsfiddle.net/reblace/6FkBd/2/

从小提琴：

function mouseover(d) {
    d3.select(this).append("text")
        .attr("class", "hover")
        .attr('transform', function(d){ 
            return 'translate(5, -10)';
        })
        .text(d.name + ": " + d.id);
}

// Toggle children on click.
function mouseout(d) {
    d3.select(this).select("text.hover").remove();
}

基本上，它附加了一个 SVG 文本元素并将其从悬停元素的位置偏移。

这是我如何在外部地图中查找数据的示例：

// Update the bound data
data.svg.selectAll("g.map path").transition().duration(750)
    .style("fill", function(d) {
        // Get the feature data from the mapData using the feature code
        var val = mapData[d.properties.code];

        // Return the colorScale value for the state's value
        return (val !== undefined)? data.settings.colorScale(val) : undefined;
});

如果您的数据是静态的，您可以将其加入到您的 topojson 文件中（如果您正在使用该文件）。https://github.com/mbostock/topojson/wiki/Command-Line-Reference

客户端可以更改我的数据，因此我将其分开并在每次数据更改时重新绘制地图，以便颜色更新。由于我的数据是 topojson，我可以使用 d.properties.code 从地图数据中访问要素 id（因为我已经使用上面引用的 topojson 工具将代码加入到 topojson 文件中......但你可以使用任何唯一的 id位于您拥有的空间数据文件中）。

于 2013-10-11T17:00:11.073 回答