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

【问题标题】：Updating d3 chart added when geojson polygon is clicked to leaflet map单击geojson多边形到传单地图时添加的更新d3图表
【发布时间】：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

【问题讨论】：

标签： javascript d3.js leaflet

【解决方案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”

【讨论】：