基於密鑰

設置choropleth中的顏色我試圖根據鏈接到該密鑰的某些屬性設置choropleth的顏色。但是，所有設置顏色的方法只具有該特定位置的值，而不是其關鍵。基於密鑰

var map = dc.geoChoroplethChart(dom) 
    .height(width*0.8) 
    .width(width) 
    .dimension(dim) 
    .projection(projection) 
    .colorAccessor(function(d,i){ 
    // it isn't the usual d={key,value} but only d=value 
    }) 
    .colorCalculator(function(d,i){ 
    // it isn't the usual d={key,value} but only d=value 
    //and it's deprecated 
    }) 
    .title(function (d) {return d.key + ': ' + d.value;}) 
    // got the key,value as expected

如何從colorAccessor獲取密鑰？它從其他功能（例如標題）工作正常

來源

2017-02-28 Xavier

你沒有想象它：圖表確實只傳遞了值，而且它完全不一致;這部分是因爲它具有地圖數據和交叉過濾數據，但大多數情況下可能沒有想到。看起來你可能會使用'i'作爲你的geoJson的索引來獲取密鑰？ – Gordon

Ouch。你認爲這是可以改變的嗎？它會是連貫的，但打破每一個choropleth;（我正在檢查你的黑客看看我是否可以解決它 – Xavier

是的，事實上[你在幾年前報告這個問題]（https://github.com/dc -js/dc.js/issues/872），並且它與其他圖表中的類似問題有關聯，也許最安全的做法是一次改變所有這些，並且像我們在棄用函數時一樣附加一個控制檯警告給他們。。*是關於修復破損的接口。 – Gordon

我結束了使用的解決方法：創建複製的值的鍵自定義功能降低。

//the iso code of the country is the key 
    var group = dim.group().reduce(
    function (p, v) { 
     p.total += +v.total; 
     if (p.iso == "") { 
     p.iso = v.country; 
     } 
     return p; 
    }, 
    function (p, v) { 
     p.total -= +v.total; 
     return p; 
    }, 
    function() { return { 
     total:0,iso:"" 
     }; 
    }); 

var map = dc.geoChoroplethChart(dom) 
    .colorAccessor(function(d){ 
    if (!d || !d.value.iso) 
     return null; // area without data 
    // now d.value.iso contains the key, and d.value.total contains the value 
    return colorIndex(d.value.iso,d.value.total);// do magic 
    }) 
    ....

來源

2017-03-03 07:35:54 Xavier

所以它原來是「正常」。正如Gordon所建議的那樣，解決方案是將geojson的索引與您想要的數據進行映射。就我而言，我對一個國家陣列上的每個國家額外的數據：

var geojson=topojson.feature(europe,europe.objects.countries); 
    // map index in the map to country data this hack is to solve a problem of not having the key on the colorAccessor 
    var geo2data=[]; 
    geojson.features.forEach(function(d,i1){ 
    var i2=country.findIndex(function(c) { 
     return c.country.toUpperCase()==d.id}); 
    geo2data[i1] = i2; 
    }); 

    var map = dc.geoChoroplethChart(dom) 
    ... 
    .colorAccessor(function(v,i){ 
    if (geo2data[i] >= 0){ 
     //geo2data[i] contains extra values, eg 
     return v/country[geo2data[i]].threshold; 
    } 
    return v; 
    })

來源

2017-03-01 16:17:56 Xavier

哇，這是非常痛苦的，但我不明白如何使它與當前的API更好。發佈解決方法！ – Gordon

回答

相關問題