Question

在dc.geoChoroplethChart上，我使用路径的pointRadius方法设置geojson点的半径：

.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);
        });

Answer 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

如何在geoChoroplethChart重绘时更新pointRadius（）？

1 个答案: