Добавить элементы SVG поверх существующих элементов

Question

Я пытаюсь добавить точки на карту, используя d3.js библиотека. (Я пытался адаптировать сценарий из этой сути).

Проблема в том, что карта отображается поверх точек. Я попытался использовать другой ответ SO, который предложил что-то вроде этого: svg.append("g").attr("id", "map").attr("id", "points")... но я не смог заставить его работать. Я давно пользуюсь Python... JavaScript для меня новый (так что прошу прощения за наивность).

Я использую следующий CSS:

  <style>
    body {
      background-color: white;
    }
    svg {
        border: 1px solid black;
        background-color: #a4bac7;
    }
        .land {
          fill: #d7c7ad;
          stroke: #8999ab;
        }
        .boundary {
          fill: none;
          stroke: #a5967f;
        }
  </style>

Тело:

    <script type="text/javascript" src="d3/d3.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>

    <script>
        var width = 960;
        var height = 480;
        var dataURL = "https://gist.githubusercontent.com/abenrob/787723ca91772591b47e/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json";

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

---

В ответ на этот ответ SO ответ, добавил это:

        svg.append("g")
                .attr("id", "map")
                .attr("id", "points");

---

        var projection = d3.geoEquirectangular()
            .scale(153)
            .translate([width/2,height/2])

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

        d3.json(dataURL, function(error, world) {
            svg.append("g")
                .select("#map").selectAll(".map")
                .attr("class", "land")
                .selectAll("path")
                .data([topojson.object(world, world.objects.land)])
                .enter().append("path")
                .attr("d", path);
            svg.append("g")
                .select("#map").selectAll(".map")
                .attr("class", "boundary")
                .selectAll("boundary")
                .data([topojson.object(world, world.objects.countries)])
                .enter().append("path")
                .attr("d", path);
            }
        );

        var lngLatExtract = function(d, i){
            return projection([d['lng'], d['lat']])[i];
        };

        d3.csv("cities.csv", function(data){
                svg.append("g")
                        .select("#points").selectAll(".points")
                        .data(data)
                        .enter()
                            .append('circle')
                            .attr("cx", function(d){
                                return lngLatExtract(d, 0);
                            })
                            .attr('cy', function(d){
                                return lngLatExtract(d, 1);
                            })
                            .style("fill", "blue")
                            .style("opacity", 0.75)
                            .attr("r", function(d){
                                return Math.sqrt(parseInt(d['population']) * 0.000001)
                            });
                }
        );

    </script>

cities.csv выглядит так:

rank,place,population,lat,lng
1,New York city,8175133,40.71455,-74.007124
2,Los Angeles city,3792621,34.05349,-118.245323

Answer 1

И то и другое d3.json а также d3.csv являются асинхронными функциями Порядок, в котором запускаются их обратные вызовы, не является заданным, и фактически, поскольку ваш CSV-файл меньше, его обратный вызов, вероятно, запускается первым. Это означает, что ваш svg.append("g") в вашем CSV обратный вызов происходит до svg.append("g") в обратном вызове JSON. Вы можете подтвердить это, проверив DOM и увидев, что было добавлено первым.

Тем не менее, я бы переключился на использование d3.queue. Это позволяет вам запустить как d3.json а также d3.csv Асинхронные запросы и затем запуск одного обратного вызова с обоими завершены.

Другой менее обтекаемый вариант - разместить d3.csv код в обратном вызове d3.json вызов.