javascript - 从引导中的弹出窗口到侧边栏

我想使用引导程序将已开发的应用程序从在弹出窗口中显示图表转换为边栏。

它不像我想的那么容易。在弹出窗口中添加内容相对容易，但我不确定从哪里开始改编代码以在图表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];

编辑2

因此，我不得不在同事的建议下修改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);
    }

});

最佳答案

在onEachFeature方法中使用图层的click事件将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>');
    });
}

关于javascript - 从引导中的弹出窗口到侧边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32972897/