单击geojson多边形到传单地图时添加的更新d3图表

Posted 2023-02-22

【中文标题】单击geojson多边形到传单地图时添加的更新d3图表

【英文标题】：Updating d3 chart added when geojson polygon is clicked to leaflet map

【发布时间】：2017-10-10 02:00:03

【问题描述】：

我通过以下方式在一个 Leaflet.js 地图上创建了一个 d3 图表 div：

<div id="map">
    <div class="leaflet-bottom leaflet-left">
        <div id="chart"></div>
     </div>
</div>

leaflet-bottom leaflet-left 将 div 嵌入到地图的左下角。我还添加了 geojson 并想知道当单击不同的 geojson poylgon 时如何更新 div 中的 d3。目前，当我单击一个多边形时，条形图就会出现。但是，当我单击另一个时，它不会更新。为 onEachFeature 函数中的点击执行此操作的 javascript 是：

click: function(e)
           var barnum = [];
           var barcat = []
           /* pm25 holds data to create d3 bar chart */
           for(var i = 0; i < pm25.length; i++)                                                         
               if(feature.properties.BoroCD == pm25[i][1])                                                                   
                   if(data[i].Year.startsWith('Annual'))                                                                        
                       barnum.push(data[i].Mean);                                                                         
                       barcat.push(data[i].Year);
                   
               
           
           var x = d3.scaleLinear()
                     .domain([0, d3.max(barnum)])
                     .range([0, 100])

           d3.select("#chart")
             .selectAll("div")
             .data(barnum)
             .enter().append("div")
             .style("width", function(d)  return x(d) + "px"; )
             .text(function(d)  return d; );
     

单击不同的多边形时如何更新图表？我有完整的代码here

【参考方案1】：

你可以这样使用：

 d3.select("#chart")
         .selectAll("div")
         .data(barnum)
         .enter().append("div")
         .style("width", function(d)  return x(d) + "px"; )
         .text(function(d)  return d; )
         .on("mouseover", function (d) 
                    )
         .on("mouseout", function (d) 
                        
                    )
         .on("mousedown", d => )
         .on("click", scope.select);

希望对您有所帮助。除了点击，您还可以使用其他属性，例如“mouseover”、“mouseout”和“mousedown”