geoChoroplethChart地图，使用标签显示城市/兴趣点 [英] geoChoroplethChart map that displays cities / points of interest with tags

问题描述

我使用

将不同的数据条目作为地图上的兴趣点呈现。

例如，我们在墨西哥有城市，数据表示龙舌兰酒消费量。

想要做的是，例如，在不同城市的欧洲的龙舌兰酒消费。

如何覆盖这些信息，假设我有 - 或者无论如何，只是某种类型的玩具示例带有纬度和经度信息，通过我的欧洲地图。

事实是，很清楚如何使用 d 3 .js 来做到这一点， >不清楚如何通过使用 d c .js （即crossfilter）的地图实现此目的。

所有我的代码都可以在此处找到。

这是与地图本身最密切相关的部分：

  //这是Map 
 d3.json（data / europe.json，function（error，eu）{
 
 console.log（'map'，eu）
 usChart 
。width（590）
 .height（500）
 .projection（projection 
 .scale（（1200 + 1）/ 2）
 .translate（[ 3360/4]）
 .precision（.1）
）
 .dimension（countries）
 .group（countriesJobsdSum）
 
 .filterHandler （dimension，filter）{
 dimension.filter（function（d）{return usChart.filter（）！= null？ d.indexOf 
（usChart.filter（））> = 0：true;}）; // perform filtering 
 return filter; //返回实际的过滤器值
}）
 
 .colors（d3.scale.quantize（）。range（
 [＃8c857d，＃d982ab ＃d9525e，＃a63f52，＃8c6976，＃55b1b1，＃637e9e]）
）
 .colorDomain（[0，200]）
 .colorCalculator function（d）{return d？usChart.colors（）（d）：'#ccc';}）
 .overlayGeoJson（eu.features，countries，function（d）{
 return d .properties.name; 
 // return d.properties.Country; 
}）
 .transitionDuration（0）
 .title（function（d）{
 return Country：+ d.key +\\\
 Number of Jobs：+ numberFormat（d.value？d.value：0）; 
}）; 
  

解决方案

您可以使用

  .on（renderlet，drawAdditionalStuffInMap）
  

$ b b

在地图中绘制其他东西，函数将如下所示：

  function drawAdditionalStuffInMap（_chart，selection） {
 var svg = _chart.svg（）; 
 svg.selectAll（g.additionalStuff）。remove（）; 
 
 var group = svg.selectAll（g.additionalStuff）; 
 
 if（group.empty（））{
 group = svg.append（g）。classed（additionalStuff，true）; 
} 
 
 //你需要实现calculateAdditionalDataPoints 
 var additionalData = calculateAdditionalDataPoints（）; 
 var additionalNodes = group.selectAll（circle）。data（additionalData，function（x）{return x.id;}）; 
 
 _chart.dimension（）。top（Infinity）.map（function（d）{
 d.location = proj（[d.long，d.lat]）; 
 return d; 
}）; 
 
 additionalNodes.enter（）
 .append（circle）
 .attr（x，0）
 .attr（y，0） 
 .attr（r，100）
 .attr（transform，function（d）{returntranslate（+ d.location [0] +，+ d.location [ 1] +）;}）; 
 
 additionalNodes.exit（）。remove（）; 
} 
  

上述代码要求您使用地图的投影作为proj函数并且所有数据点具有存储为long和lat的经度和纬度。它在当前选定的数据点绘制半径为100的圆。如果您不支持在地图上缩放和平移，您可以为此函数之外的所有数据点计算d.location一次。

I've implemented an infographic / map using crossfilter and d3.js.

What I would like is to add the functionality of...

Rendering different data entries as points of interest on the map.

For example here we have cities in Mexico and data to indicate a metric of tequila consumption.

What I would like to make is, for instance, tequila consumption in different cities of Europe.

How can I overlay such information, assuming I have it- or anyway, just some kind of toy example with latitude and longitude information, over my map of Europe.

The thing is, it's very clear how to do this with d3.js but it is unclear how to achieve this with a map that is working with dc.js, i.e. crossfilter.

All of my code can be found here.

This is the part most closely related to the map itself:

        //This is the data for the Map
    d3.json("data/europe.json", function (error, eu) { 

        console.log('map', eu)
        usChart
        .width(590)
        .height(500)
        .projection(projection
                    .scale((1200 + 1) / 2 )
                    .translate([660 / 4, 3360 / 4])
                    .precision(.1)
                    )
                .dimension(countries)
                .group(countriesJobsdSum)

                    .filterHandler(function(dimension, filter){     
    dimension.filter(function(d) {return usChart.filter() != null ? d.indexOf
    (usChart.filter()) >= 0 : true;}); // perform filtering
    return filter; // return the actual filter value
 })

                .colors(d3.scale.quantize().range(
                    ["#8c857d", "#d982ab", "#d9525e", "#a63f52", "#8c6976", "#55b1b1", "#637e9e"])
                )
                .colorDomain([0, 200])
                .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; })
                .overlayGeoJson(eu.features, "countries", function (d) {
                    return d.properties.name;
                    //return d.properties.Country;
                })
                .transitionDuration(0)
                .title(function (d) {
                    return "Country: " + d.key + "\nNumber of Jobs: " + numberFormat(d.value ? d.value : 0) ;
                }); 

解决方案

You can use

.on("renderlet", drawAdditionalStuffInMap)

to draw additional things in the map, the function would look like this:

function drawAdditionalStuffInMap(_chart, selection) {
    var svg = _chart.svg();
    svg.selectAll("g.additionalStuff").remove();

    var group = svg.selectAll("g.additionalStuff");

    if (group.empty()) {
        group = svg.append("g").classed("additionalStuff", true);
    }

    //you need to implement calculateAdditionalDataPoints
    var additionalData = calculateAdditionalDataPoints();
    var additionalNodes = group.selectAll("circle").data(additionalData, function(x) { return x.id; });

    _chart.dimension().top(Infinity).map(function(d) {
            d.location = proj([d.long, d.lat]);
            return d;
    });

    additionalNodes.enter()
        .append("circle")
            .attr("x", 0)
            .attr("y", 0)
            .attr("r", 100)
            .attr("transform", function(d){ return "translate(" + d.location[0] + "," + d.location[1] + ")"; });

    additionalNodes.exit().remove();
}

The above code requires you to use the projection of the map as the proj function and that all data points have the longitude and latitude stored as long and lat inside them. It draws circles of radius 100 at the currently selected Datapoints. If you dont support zooming and panning on your map you can calculate d.location once for all data points outside of this function.

这篇关于geoChoroplethChart地图，使用标签显示城市/兴趣点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！