javascript - 显示带有标签的城市/兴趣点的 geoChoroplethChart map

Question

我已经实现了一个 infographic / map使用 crossfilter和 d3.js .

我想要的是添加将不同的数据条目呈现为 map 上的兴趣点的功能:

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

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

如何将此类信息叠加到 my map of Europe 上？ .

问题是，很清楚如何使用 d3.js 来实现这一点，但是不清楚如何使用与 一起工作的 map 来实现这一点dc.js，即crossfilter。

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

这是与 map 本身关系最密切的部分:

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

要在 map 中绘制其他内容，函数如下所示:

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

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