dc leaflet js 如何使用来自新 ajax 调用的数据更新 chloropeth？

Question

我正在尝试使用 dc leaflet js 绘制叶绿素图表。我的代码如下：

(function yieldvisualization() {

               var stateMap = dc.leafletChoroplethChart("#yieldcountymap");


                var centroidofState = yielddata.centroid;
                var dataforViz = yielddata.data;
                var numberFormat = d3.format(".2f");
                var yearformat = d3.time.format("%Y");



                dataforViz.forEach(function(d) { 
                d.productionPractice = d["Production practice"];
                parseYear = d3.time.format("%Y").parse;
                d.Year = parseYear(d["Year"])
                d.countyCode = d["Countycode"];
                d.countyName = d["County"];
                d.classDescription = d["Class Description"];
                d.utilizationPractice = d["Utilization"];
                d.measureValue = parseFloat(d["Value"]);    
                }); 

                var crossDataforviz = crossfilter(dataforViz);

                var counties = crossDataforviz.dimension(function (d) {
                    return d.countyCode;
                        });
                var valueDim = crossDataforviz.dimension(function (d) {
                    return d.measureValue;
                        });

                var minusvalue = valueDim.bottom(1)[0].measureValue;
                var maxusvalue = valueDim.top(1)[0].measureValue;

                var countyGroup = counties.group().reduce(
                                function (p, v) {
                                ++p.count;
                                p.sumValue += v.measureValue;
                                p.avgValue = p.sumValue / p.count;
                                return p;},
                            /* callback for when data is removed from the current filter results */
                            function (p, v) {
                                --p.count;
                                p.sumValue -= v.measureValue;
                                p.avgValue = p.count ? p.sumValue / p.count : 0;
                                return p;
                            },
                            /* initialize p */
                            function () {
                                return {count: 0,sumValue: 0,avgValue: 0}});
                console.log(countyGroup.all())

                var groupreturn = countyGroup.all();

                var avgValuelist = [];

                for (i=0; i< groupreturn.length; i++){
                        avgValuelist.push(groupreturn[i].value.avgValue);

                    }
                var sortedavgValuelist = avgValuelist.sort(function(a, b){return a-b});

                var sortedavgValuelistfirst = 0;
                var sortedavgValuelistlast = 0;
                if (sortedavgValuelist.length == 0){
                    sortedavgValuelistfirst = 0;
                    sortedavgValuelistlast = 0;
                } else {
                    sortedavgValuelistfirst = sortedavgValuelist[0];
                    sortedavgValuelistlast = sortedavgValuelist[sortedavgValuelist.length - 1]
                }

                console.log(sortedavgValuelistfirst,sortedavgValuelistlast)

                var statefiletoLoad = "static/" + valueState + ".json"

                d3.json(statefiletoLoad, function (countyJson) {                
                    stateMap
                        .width(500)
                        .height(400)
                        .center(centroidofState)
                        .zoom(6)
                        .dimension(counties)
                        .group(countyGroup)
                        .colors(d3.scale.quantize().range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]))
                        .colorDomain([sortedavgValuelistfirst, sortedavgValuelistlast])
                        .colorCalculator(function (d) { return d ? stateMap.colors()(d.value.avgValue) : '#4863A0'; })
                        .geojson(countyJson.features)
                        .featureKeyAccessor(function(feature) {
                        return feature.properties.COUNTY;
                        })
                        .renderPopup(true)
                        .popup(function(d,feature) {
                            return "County: " + feature.properties.NAME + ";     " +"Average Yield: "+numberFormat(d.value.avgValue ? d.value.avgValue : 0) + " "+unitMeasure;
                        });





                dc.renderAll();

                }); 


                }());

当我从 ajax 调用中收到新数据时，将重新绘制此图表。初始绘制工作正常，但是在重绘时我收到传单错误："map container is already initialized"。如果有 map.remove() 方法可用于在新的 ajax 调用中重绘地图，请通知我。对此的任何指示将不胜感激。

Answer 1

有a bug where dc.leaflet.js will fail to render a second time, and I'm about to merge the fix.

但是，我认为在这种情况下，您可能希望第二次重绘而不是渲染。这样你应该在数据变化时得到转换。

您可以简单地添加一个标志 isRendered 并将代码更改为

var isRendered = false;
if(isRendered)
    dc.redrawAll();
else {
    dc.renderAll();
    isRendered = true;
}

dc leaflet js 如何使用来自新 ajax 调用的数据更新 chloropeth？

dc leaflet js How to update the chloropeth with data from new ajax call?

javascript

leaflet

dc.js

dc.leaflet.js