D3.js：如何组合2个数据集，以创建地图和显示值on.mouseover？ [英] D3.js: How to combine 2 datasets in order to create a map and show values on.mouseover?

问题描述

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

例如：

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

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

- >当您在地图上工具提示应显示来自第二个数据集的一些数据的句子。

我可以使用.json文件中的数据制作地图并显示工具提示，但如何插入第二个数据集？

• 我的函数中有一个新函数，用于创建地图？


• 我必须采取全新的方式吗？


• 我应该在使用d3.js之前将.json文件与第二个数据集合并？

<我欣赏任何想法！ ：）

解决方案

所以，我想你要问的是如何从json获取空间数据并加入一些csv数据是单独加载的？

我做了一个类似于choropleth地图我绘制，基本上我刚刚创建一个拓扑元素ids到数据对象的映射，然后我使用拓扑元素id来获取我想要与实际绘制的地图元素相关联的查找（我使用此方法根据fips国家代码设置choropleth的颜色）。

所以基本上，绘制地图，让你有一个id关联每个地图元素，你想能够悬停在。然后，在mouseover / mouseout处理程序中，您将使用该id来查找您想要在工具提示中显示的数据，并使用svg title元素或tipy或手动绘制svg文本元素或任何显示工具提示。 p>

这里有一些有用的绘图工具提示：
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）; 
} 
 
 //点击切换子项。 
 function mouseout（d）{
 d3.select（this）.select（text.hover）。remove（）; 
} 
  

基本上，它附加一个SVG文本元素，

下面是一个如何在外部映射中查找数据的示例：

  //更新绑定数据
 data.svg.selectAll（g.map path）。transition（）。duration（750）
 .style ，function（d）{
 //使用特征代码从mapData获取要素数据
 var val = mapData [d.properties.code]; 
 
返回状态值的colorScale值
 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在您拥有的空间数据文件中）。

I would like to combine two datasets on a map in D3.js.

For example:

1st dataset: spatial data in .json.

2nd dataset: Data to the areas in .csv

--> When you hover on the map a tooltip should show a sentences with some data from the 2nd dataset.

I am able to make the map and show a tooltip with data within the .json-file, but how do I insert the 2nd dataset?

• A new function within my function that creates the map?
• Do I have to take a completely new way?
• Should I merge the .json-file with my 2nd dataset before using d3.js?

I appreciate any thoughts! :)

解决方案

So, I think what you're asking is how to take spatial data from json and join it with some csv data that is loaded separately?

I did something similar with a choropleth map I was drawing and basically I just created a map of topology element ids to data objects and then I did a lookup using the topology element id to get whatever I wanted to associate with the actual drawn map element (I was using this method to set the color for the choropleth based on the fips country code).

So basically, draw the map so that you have an id associated with each map element that you want to be able to hover over. Then, in your mouseover/mouseout handlers, you will use that id to lookup the data you want to show in the tooltip and either use the svg title element or tipsy or manually draw an svg text element or whatever to show the tooltip.

Here's a couple useful references for drawing tooltips: https://gist.github.com/biovisualize/1016860 http://jsfiddle.net/reblace/6FkBd/2/

From the fiddle:

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

Basically, it's appending an SVG text element and offsetting it from the position of the element being hovered over.

And here's a sample of how I look up data in an external map:

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

If your data is static, you can join it into your topojson file (if that's what you're using). https://github.com/mbostock/topojson/wiki/Command-Line-Reference

The client could change my data, so I kept it separate and redrew the map each time the data changed so that the colors would update. Since my data was topojson, I could access the feature id from the map data using d.properties.code (because I had joined the codes into the topojson file using the topojson tool I reference above... but you could use whatever unique id is in the spatial data file you have).

这篇关于D3.js：如何组合2个数据集，以创建地图和显示值on.mouseover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！