疊加層不顯示在數據生成的d3形狀上​​

Question

我是d3.js的noob。我使用topoJSON數據來渲染地圖，到目前爲止它的工作效果很好。現在我想覆蓋每個國家/地區頂部的一些數據，例如文字或圈子，我正在打一堵牆。我有類似這樣的代碼：

哪個正確呈現我的地圖。爲了覆蓋它的一些圈子裏，我做了以下內容：

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標記中，但在文檔中完全不顯示。我顯然做錯了什麼，但我對此感到失落。

Answer 1

問題是，您將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