Javascript 如何在传单中显示多个d3可重复使用图表？

我正试图在传单地图（遵循本教程：）的几个区域（也使用D3绘制）的质心中绘制D3可重用图表（）。当在传单窗格外绘制图表时，效果很好，但当将它们附加到我的g元素（我在地图中用于所有SVG）时，它们似乎消失了

到目前为止，我已经画了一些简单的圆圈，我希望我的图表能显示出来，这些圆圈显示得很好。在区域内添加图形时，问题似乎会发生。这是将图形与区域质心中的圆完全相同时的结果（）和代码。正如你所看到的，圆圈出现了，但根本没有图形。我错过了什么

    var mymap = new L.map('mymap', {
        maxZoom: 10,
        maxZoom: 10,
        minZoom: 5,
        maxBounds: [
            //south west bounds
            [59, 0],
            //north east bounds
            [74, 37]
        ],
        maxBoundsViscosity: 1,
    }).setView([68.8, 20.7], 6);




    //Fetching map from internet, change this to switch whole background map
    L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(mymap);



     //Adding SVG on top
    var svg = d3.select(mymap.getPanes().overlayPane).append("svg"),
        g = svg.append("g").attr("class", "leaflet-zoom-hide")

    d3.json("subunits.json", function(error, collection) {
        if (error) throw error;

        var transform = d3.geo.transform({point: projectPoint}),
          path = d3.geo.path().projection(transform);

        var feature = g.selectAll("path")
              .data(collection.features)
            .enter().append("path")
              .attr('style', 'z-index:9999');

        var circles = g.selectAll("circle")
              .data(collection.features)
            .enter().append("circle")
              //.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
              .attr("r", 15) //function(d) {return Math.floor(Math.random()*30);})
              .attr('style', 'z-index:9999');

        //-----------------Radial bar chart init and functions-------------------------------------------------
        var data = [];
        var keys = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        function initData() {
            data = [{data: {}}];
            for(var i=0; i<keys.length; i++)
                data[0].data[keys[i]] = Math.random() * 10;
        };
        var chart = radialBarChart()
            .barHeight(25)
            .reverseLayerOrder(true)
            //.capitalizeLabels(true)
            .barColors(['#e6194b', '#f58231', '#ffe119', '#bcf60c', '#3cb44b', '#46f0f0', '#4363d8', '#911eb4', 'f032e6'])
            .domain([0,10])
            .tickValues([])
            .tickCircleValues([]);

        initData();

        var charts = g.selectAll("chart")
              .data(collection.features)
            .enter().append("chart")
              .datum(data)
              .attr('style', 'z-index:9999')
              .call(chart);




        //-----------------------------------------------------------------------------------------------------       

        mymap.on("moveend", reset);
        reset();

        // Reposition the SVG to cover the features.
        function reset() {
            var bounds = path.bounds(collection),
                topLeft = bounds[0],
                bottomRight = bounds[1];




            circles .attr("transform", function(d) {
                return "translate(" + 
                    path.centroid(d) + ")";

                });

            charts  .attr("transform", function(d) {
                return "translate(" + 
                    path.centroid(d) + ")";

                });



            svg     .attr("width", bottomRight[0] - topLeft[0])
                    .attr("height", bottomRight[1] - topLeft[1])
                    .style("left", topLeft[0] + "px")
                    .style("top", topLeft[1] + "px");

            g       .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

            feature.attr("d", path);
            circles.attr("d", path);
            charts.attr("d", path);

        }

        // Use Leaflet to implement a D3 geometric transformation.
        function projectPoint(x, y) {
            var point = mymap.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
        }


    });

    function applyLatLngToLayer(d) {
        var y = d.geometry.coordinates[1];
        var x = d.geometry.coordinates[0];
        return mymap.latLngToLayerPoint(new L.LatLng(y, x));
    }

var mymap=newl.map（'mymap'{
最大缩放：10，
最大缩放：10，
minZoom:5，
最大界限：[
//西南边界
[59, 0],
//东北边界
[74, 37]
],
最大边界粘度：1，
}).setView（[68.8,20.7]，6）；
//正在从internet获取地图，将此更改为切换整个背景地图
L.tileLayer（'https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png'{
属性：“©；”
}).addTo（mymap）；
//在顶部添加SVG
var svg=d3.select（mymap.getPanes（）.overlypane）.append（“svg”），
g=svg.append（“g”）.attr（“类”，“传单缩放隐藏”）
json（“subunits.json”，函数（错误，集合）{
如果（错误）抛出错误；
var transform=d3.geo.transform（{point:projectPoint}），
path=d3.geo.path（）.projection（transform）；
var功能=g.selectAll（“路径”）
.数据（收集.特征）
.enter（）.append（“路径”）
.attr（'style'，'z-index:9999'）；
变量圆=g.selectAll（“圆”）
.数据（收集.特征）
.enter（）.append（“圆”）
//.attr（“transform”，函数（d）{return”translate（“+path.centroid（d）+”）；}）
.attr（“r”，15）//函数（d）{返回Math.floor（Math.random（）*30）；}）
.attr（'style'，'z-index:9999'）；
//-----------------径向条形图初始化和函数-------------------------------------------------
var数据=[]；
变量键=['Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec']；
函数initData（）{
数据=[{data:{}}]；
对于（var i=0；iA工作示例（例如codepen、jsfiddle）会很有帮助。
subunits.json
的内容是什么？