Наложения не отображаются поверх форм d3, сгенерированных данными

Я нуб с d3.js. Я использую данные topoJSON для рендеринга карт, и до сих пор все работало отлично. Теперь я хочу наложить некоторые данные, такие как текст или круги, поверх каждой страны/региона, и я упираюсь в стену. У меня есть код, похожий на этот:

var countries = g.append("g")
    .attr("id", "countries")
    .selectAll("path")
    .data(topojson.feature(collection, collection.objects.countries).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", colorize)
    .attr("class", "country")
    .on("click", clicked)

который правильно отображает мою карту. Чтобы наложить на него несколько кругов, я делаю следующее:

countries
    .append("circle")
    .attr("r", function(d, i, j) {
      return 10; // for now
    })
    // getCentroid below is a function that returns the 
    // center of the poligon/path bounding box
    .attr("cy", function(d, i, j) { return getCentroid(countries[0][j])[0]})
    .attr("cx", function(d, i, j) { return getCentroid(countries[0][j])[1]})
    .style("fill", "red")

Это довольно громоздко (особенно способ доступа к массиву стран), но ему удается добавить кружок для каждого пути, представляющего страну. Проблема в том, что круг существует в разметке SVG, но вообще не отображается в документе. Я, очевидно, делаю что-то не так, но я не понимаю, что это такое.


javascript svg d3.js topojson
person Sergi Mansilla    schedule 13.12.2013    source источник
comment
Похоже, координаты сбились. Вы проверили это? Помните, что вам нужно проецировать точку центра тяжести на экранные координаты.   -  person Lars Kotthoff    schedule 13.12.2013
comment
При ручном редактировании разметки и размещении круга в качестве элемента, родственного проселочной дороге, круг становится видимым (хотя и с неправильными координатами), но круг исчезает, когда он является дочерним элементом проселочной дороги. Кроме того, как спроецировать круг в правильные координаты, а не путь?   -  person Sergi Mansilla    schedule 13.12.2013
comment
А, понятно -- circle элементы не могут быть дочерними элементами path элементов. Опубликует ответ с более подробной информацией.   -  person Lars Kotthoff    schedule 13.12.2013

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что вы добавляете элементы circle к элементам path, чего нельзя сделать в SVG. Вам нужно добавить их к родительским элементам g. Код будет выглядеть примерно так.

var countries = g.selectAll("g.countries")
  .data(topojson.feature(collection, collection.objects.countries).features)
  .enter().append("g")
  .attr("id", "countries");

countries.append("path")
  .datum(function(d) { return d; })
  .attr("d", path)
  // etc

countries.append("circles")
  // etc
person Lars Kotthoff    schedule 13.12.2013
comment
Это сработало, спасибо. Теперь нужно выяснить, как спроецировать круги в правильной перспективе и не сделать так, чтобы более поздние пути в коллекции перекрывали некоторые круги :) - person Sergi Mansilla; 13.12.2013