Показать данные на карте, используя D3 - PullRequest
Новая
       17

Показать данные на карте, используя D3

0 голосов
/ 10 января 2019

Я хочу показать данные на карте, используя D3. У меня есть карта, работающая с этим кодом: 

var jMap = $(".map"),
    height = jMap.height(),
    width = jMap.width(),
    mapJsonUrl = 'https://ucarecdn.com/8e1027ea-dafd-4d6c-bf1e-698d305d4760/world110m2.json',
   svg = d3.select(".map").append("svg")
    .attr("width", width)
    .attr("height", height);

var getProjection = function(worldJson) {
    // create a first guess for the projection
 var scale = 1,
     offset = [ width / 2, height / 2 ],
     projection = d3.geoEquirectangular().scale( scale ).rotate( [0,0] ).center([0,5]).translate( offset ),
     bounds = mercatorBounds( projection ),
     scaleExtent;

    scale = width / (bounds[ 1 ][ 0 ] - bounds[ 0 ][ 0 ]);
    scaleExtent = [ scale, 10 * scale ];

    projection
      .scale( scaleExtent[ 0 ] );

  return projection;
},

mercatorBounds = function(projection) {
  // find the top left and bottom right of current projection
  var maxlat = 83,
      yaw = projection.rotate()[ 0 ],
      xymax = projection( [ -yaw + 180 - 1e-6, -maxlat ] ),
      xymin = projection( [ -yaw - 180 + 1e-6, maxlat ] );

   return [ xymin, xymax ];
};


d3.json(mapJsonUrl, function (error, worldJson) {
    if (error) throw error;

  var projection = getProjection(),
      path = d3.geoPath().projection( projection );

  svg.selectAll( 'path.land' )
      .data( topojson.feature( worldJson, worldJson.objects.countries ).features )
      .enter().append( 'path' )
      .attr( 'class', 'land' )
      .attr( 'd', path );
});

Это мой файл JavaScript. 

<body>

    <div class="map"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/2.2.0/topojson.min.js"></script>
    <script src="assets/js/index.js"></script>

  </body>

А это мой HTML-файл.

Карта работает правильно, как вы можете видеть на картинке: Map with D3 & TopoJson

Так что я хочу сейчас добавить данные на карту. Вот как выглядят данные: 

[{
    "date": "1425168000000",
    "values": [{
        "name": "US",
        "value": 70421276
    }, {
        "name": "DE",
        "value": 5179869
    }, {
        "name": "GB",
        "value": 4515529
    }, {
        "name": "CN",
        "value": 2862945
    }]

Итак, у меня есть разные файлы json с этими данными для каждой страны. Например, мне нужны эти данные на карте с желтыми точками, чем выше значение, тем больше точек я хочу показать на карте.

Возможно ли это с данными и картой, которые у меня есть, и как мне начать с них?

1 Ответ

0 голосов
/ 10 января 2019

Как насчет того, чтобы сначала получить список местоположений столиц (например, здесь ), а затем использовать метод projection для преобразования координат широты / долготы в координаты SVG (как показано в this пример): 

svg.selectAll("circle")
        .data(yourData).enter()
        .append("circle")
        .attr("cx", function (d) { return projection(latLon)[0]; })
        .attr("cy", function (d) { return projection(latLon)[1]; })
        .attr("r", function(d) { return d.size; })
        .attr("fill", "yellow");

Предполагается, что вы преобразовали файл XLS в массив JSON (например, с помощью файла CSV) и имеете свойство latLon для каждого капитала в качестве массива. И d.size содержит значения, соответствующим образом масштабированные для SVG.

...