2015-11-16 1 views
1

На dc.geoChoroplethChart, я устанавливаю радиус GeoJSON точек, используя pointRadius метод пути:Как я могу получить pointRadius(), обновленный при перерисовке geoChoroplethChart?

.geoPath().pointRadius(function(feature, index) { 
    var v = placeGroup.all().filter(function(item) { return item.key === feature.id; })[0].value; 
    return (v == 0)? 0 : pointScale(v); 
}); 

Я нахожу, что это работает хорошо, но на redraw() размеры точек не корректируются , Они настроены на render(). Как мне их настроить с помощью redraw()?


Вот полный кусок кода для гео графика, в случае, если оно соответствует

var projection = d3.geo.mercator() 
     .scale(1) 
     .translate([0, 0]); 
    var path = d3.geo.path() 
     .projection(projection); 
    var width = 280, 
     height = 200, 
     b = path.bounds(places), // [[left, top], [right, bottom]] 
     x_extent = Math.abs(b[1][0] - b[0][0]), 
     y_extent = Math.abs(b[1][1] - b[0][1]), 
     s = (.95/Math.max(x_extent/width, y_extent/height)), 
     t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2]; 

    // Update projection with our actual data 
    projection 
     .scale(s) 
     .translate(t) 
    ; 

    var mapchart = dc.geoChoroplethChart("#map-chart"); 
    var valueDomain = [0, placeGroup.top(1)[0].value]; 
    var maxPointRadius = Math.min(width, height)/40, 
     minPointRadius = maxPointRadius/2; 

    var pointScale = d3.scale.linear() 
      .domain(valueDomain) 
      .range([minPointRadius, maxPointRadius]); 

    mapchart.width(width) 
     .height(height) 
     .projection(projection) 
     .dimension(placeDim) 
     .group(placeGroup) 
     .colors(d3.scale.quantize().range(['#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#bd0026'])) //first three '#ffffcc','#ffeda0', '#fed976', last one,'#800026' 
     .colorDomain(valueDomain) 
     .colorCalculator(function (d) { return d ? mapchart.colors()(d) : '#ccc'; }) 
     .overlayGeoJson(places.features, "placeLayer", function (d) { 
      return d.id; 
     }).geoPath().pointRadius(function(feature, index) { 
      var v = placeGroup.all().filter(function(item) { return item.key === feature.id; })[0].value; 
      return (v == 0)? 0 : pointScale(v); 
     }); 

ответ

1

Похоже geoChoroplethChart не будет перерисовывать в формате GeoJSON, если проекция не изменилось. (Он не ожидает вас изменить geoPath - как указано в документации, что в основном удобный метод для чтения и определения центра.)

https://github.com/dc-js/dc.js/blob/develop/src/geo-choropleth-chart.js#L169-L171

В качестве временного решения, я хотел бы предложить принуждая перерисовать, сбросив проекцию каждый раз, когда диаграмма перерисовывается. Что-то вроде:

mapchart.on('preRedraw', function() { 
    mapchart.projection(projection); 
}); 

https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#basemixinon--basemixin

+0

Хороший материал; делает трюк. Нет хороших переходов, но я могу жить без него. – Laizer

+1

Я не думаю, что люди рассматривали переходы там, потому что сама карта обычно не меняется, а переход между проекциями довольно эзотерический. Я был бы открыт для изменения, но я бы хотел убедиться, что он не вызывает странных эффектов при масштабировании. – Gordon

Смежные вопросы