geoChoroplethChart 地图显示带有标签的城市/兴趣点

Question

我已经实现了 infographic / map using crossfilter and d3.js。

我想要的是添加将不同的数据条目渲染为地图上的兴趣点的功能：

例如，这里我们有墨西哥的城市和数据来指示龙舌兰酒消费量。

比如我想做的是欧洲不同城市的龙舌兰酒消费情况。

如何在 my map of Europe 上叠加此类信息。

问题是，如何使用 d3.js 非常清楚，但不清楚 如何实现使用使用 dc.js 的地图，即交叉过滤器。

我所有的代码都可以找到here。

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

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

Answer 1

您可以使用

.on("renderlet", drawAdditionalStuffInMap)

要在地图中绘制其他内容，函数如下所示：

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

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

geoChoroplethChart 地图显示带有标签的城市/兴趣点

geoChoroplethChart map that displays cities / points of interest with tags

javascript

data-visualization

d3.js

dc.js