1

DCリーフレット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 呼び出しから新しいデータを受け取ると再描画されます。最初の描画は正常に機能していますが、再描画時に「マップ コンテナーは既に初期化されています」というリーフレット エラーが発生します。新しい ajax 呼び出しでマップを再描画するために使用できる map.remove() メソッドがあるかどうか教えてください。これに関する方向性は本当に高く評価されます。

4

1 に答える 1

2

dc.leaflet.js が 2 回目のレンダリングに失敗するバグがあり、修正をマージしようとしています。

ただし、この場合、おそらく 2 回目はレンダリングではなく、再描画する必要があると思います。このようにして、データの変更に応じて遷移を取得する必要があります。

フラグisRenderedを追加して、コードを次のように変更するだけです。

var isRendered = false;
if(isRendered)
    dc.redrawAll();
else {
    dc.renderAll();
    isRendered = true;
}
于 2015-11-30T15:28:49.207 に答える