Question

我想将我开发的应用程序从弹出窗口中的图表转换为使用bootstrap的侧边栏。

它并不像我想象的那么容易。将内容放入弹出窗口相对容易，但我不知道从哪里开始调整代码以在图表div对象中发送D3图形。

我很感激让我开始的建议。

引导部分：

<div class="row">
 <div class="col-xs-12 col-sm-6 col-lg-8">
    <div id="map"></div>
 </div>
 <div class="col-xs-6 col-lg-4">
    <div id="chart"></div> 
 </div>
</div>

传单相关部分：

var onEachFeature_LMA = function onEachFeature(feature, layer) {
            layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });

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

var popup = L.popup({maxWidth:450}).setContent(div);
            layer.bindPopup(popup);

编辑：

感谢iH8，我只修改了他的代码以使用定义的div：

    layer.on('click', function () {
    // Remove current content
    $('#chart').empty();
    // Append new content
    $('#chart').append(div);
});

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

EDIT2

所以，我必须根据同事的建议修改iH8的代码才能使其正常工作。以下是他提出的建议：

function onEachFeatureInd(feature, layer) {
layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlightInd,
    click: function (e) {
            zoomToFeature(e);
// Remove current content
            $('#chart').empty();
            // Append new content
            $('#chart').append(div);
    }

});

Answer 1

使用onEachFeature方法中的图层单击事件将div附加到DOM中的图表元素：

var onEachFeature_LMA = function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: function (e) {
            zoomToFeature(e);
            setChart(e);
        }
    });
});

function setChart(e) {
    e.target.on('click', function () {
        // Remove current content
        $('#chart').empty();
        // Append new content
        $('#chart').append('<div class="popupGraph" style="width: 450px; height:350px;"><svg/></div>');
    });
}

从弹出窗口到侧边栏中的bootstrap

1 个答案: