Question

如何在固定位置显示条形图？

我正在使用传单在地图中开发图层。我想将D3对象发送到一个div，该div被发送到我的HTML页面上的固定位置。

某些上下文：geojson数据被加载并保存在名为sample的变量中。我的目标是为点击区域的每个变量制作一个带条形的水平条形图。

下面的代码在弹出窗口中显示条形图。

    var map = L.map('map').setView([51, 8], 4);

    L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a','b','c']
    }).addTo( map );


    function style(feature) {
        return {
            weight: 1,
            opacity: 1,
            color: 'white',
            fillOpacity: 0.7,
            fillColor: 'grey'
        };
    };

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#FFF',
            dashArray: '',
            fillOpacity: 0.7
        });
    };

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
    };

    var a = document.getElementById('inner');

    var onEachFeature_LMA = function onEachFeature(feature, layer) {

        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,

        });





        var div = $('<div id ="inner" class="popupGraph" style="width: 200px; height:200px;"><svg/></div>')[0];

        var popup = L.popup({
            minWidth: 200,
            minHeight: 350,
        }).setContent(div);

        layer.bindPopup(popup);

        var values = feature.properties;
        var data = [.........

        ];
        var margin = {top: 20, right: 30, bottom: 40, left: 40},
            width = 200 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom,
            barHeight = height / data.length;


        var x = d3.scale.linear()
            .domain([0, d3.max(data, function(d){return d.value;})])
            .range([0, width]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickSize(0.5);

        var svg = d3.select(div).select("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .classed("chart", true);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        var bar = svg.selectAll("g.bar")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

        bar.append("rect")
            .attr("width", function(d){return x(d.value);})
            .attr("height", barHeight - 5)
            .attr("fill", function(d, i){return colors(d.name)});

        bar.append("text")
            .attr("text-anchor", "middle")
            .attr("x", function(d) { return x(d.value) - -20; })
            .attr("y", barHeight / 2)
            .attr("dy", ".100em")
            .text(function(d) { return d.name; });

    }


    var geojson = L.geoJson(Sample, {
        style: style,
        onEachFeature: onEachFeature_LMA
    }).addTo(map);

我认为这些行重新解决了这个问题：

var onEachFeature_LMA = function onEachFeature(feature, layer) {

        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,

        });



        var div = $('<div id ="inner" class="popupGraph" style="width: 200px; height:200px;"><svg/></div>')[0];

        var popup = L.popup({
            minWidth: 200,
            minHeight: 350,
        }).setContent(div);

        layer.bindPopup(popup);

        ....
        }

Answer 1

使用您的代码，您可以尝试这样的事情：
#inner { 位置：固定;
上：30px; //从顶部偏移30 px 左：100px; //从左侧偏移100 px }
偏移量相对于视口。

如何在html中修复弹出窗口？

1 个答案: