從彈出窗口到引導窗口的邊欄

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