Question

我使用infographic / map和crossfilter实施了d3.js。

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

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

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

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

问题是，如何使用 d3.js 进行此操作非常清楚，但不清楚如何使用正在运行的地图实现此目的使用 dc.js ，即crossfilter。

我的所有代码都可以找到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。它在当前选定的Datapoints处绘制半径为100的圆。如果您不支持在地图上进行缩放和平移，则可以为此函数之外的所有数据点计算一次d.location。

geoChoroplethChart地图，用标签显示城市/兴趣点

1 个答案: