Как отобразить несколько листов многократного использования d3 в листовке? - PullRequest
Новая
       6

Как отобразить несколько листов многократного использования d3 в листовке?

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

Я пытаюсь нарисовать диаграммы многократного использования D3 (https://github.com/prcweb/d3-radialbar) в центре тяжести нескольких областей (также нарисованных с помощью D3) карты листовки (после этого урока: https://bost.ocks.org/mike/leaflet/). При рисовании диаграмм)за пределами панели листовок она работает нормально, но при добавлении их к моему элементу g (который я использую для всех svgs на моей карте) они, кажется, исчезают.

На данный момент я нарисовал простые круги, гдеЯ хочу, чтобы мои диаграммы отображались, и они отображаются нормально. Проблема возникает при добавлении графиков внутри областей. Это результат (https://imgur.com/a/uR8BXjX) и код при обработке графиков точно так же, как круги вЦентроиды областей. Как вы можете видеть, появляются круги, но не графики вообще. Что мне здесь не хватает? 

    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));
    }

Редактировать: Содержимое subunits.json (https://jsonblob.com/69f458e1-2d52-11e9-ae1f-75a64cc80f0a) включает форму (и некоторые другие данные) для различных коммун в области Норвегии, для которых я пытаюсь отобразить данные. Диаграммы должны находиться в центре тяжести этих коммун.

...