geoChoroplethChart карта, отображающая города/достопримечательности с тегами

Question

Я реализовал infographic/map с использованием crossfilter и d3.js.

То, что я хотел бы, чтобы добавить функциональность ...

Rendering различные записи данных в качестве точек интереса на карте.

Например, у нас есть города в Мексике и данные, указывающие метрику потребления текилы.

То, что я хотел бы сделать, это, например, потребление текилы в разных городах Европы.

Как я могу наложить такую ​​информацию, предполагая, что у меня есть это или, во всяком случае, просто какой-то пример игрушки с широтой и долготой, более my map of Europe.

Дело в том, что это очень понятно, как это сделать с д .js но неясно, как добиться этого с картой, которая работает с д с .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 и что все точки данных имеют долготу и широту, хранящиеся так долго и лат внутри них. Он рисует круги радиуса 100 на выбранных в данный момент Datapoints. Если вы не поддерживаете масштабирование и панорамирование на карте, вы можете рассчитать d.location один раз для всех точек данных вне этой функции.