从弹出窗口到引导窗口的边栏

Question

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

它并不像我想象的那么容易。让弹出的东西相对容易，但我不知道从哪里开始调整我的代码以发送图表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

使用层的Click事件中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>'); 
    }); 
}