Javascript 显示带有标签的城市/兴趣点的地质地貌图

我已经实现了一个使用和

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

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

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

我怎样才能覆盖这些信息呢

问题是，如何使用d3.js实现这一点非常清楚，但是不清楚如何使用使用dc.js的映射实现这一点，即交叉过滤

我所有的代码都可以找到

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

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

你可以用

.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