2

我正在尝试使用dc.js. 它有一些图表和一个 choroplethChart。一切正常，但我需要在地图上添加传单。我遵循了这个示例并使用dc.leaflet.js了库，但它返回的不是 choroplethChart，而是 Markers（见图）在此处输入图像描述

（这是使用传单之前在此处输入图像描述 的样子）代码如下，这是 geojson 所在的位置：

var usChart = dc_leaflet.choroplethChart("#us-chart");

usChart.width(1000)
    .height(450)
    .dimension(stateDim)
    .group(totalDemandByStation)
    .center([ 51.4963, -0.143 ])
    .zoom(11)
    .geojson(statesJson)
    .colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
    .colorDomain([0, max_state])
    .colors(['#fff7ec','#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000','#7f0000'])
    .colorAccessor(function(d,i) {
          return d.value;
      })
    .featureKeyAccessor(function(feature) {
          return feature.properties.name;
      })
    .renderPopup(true)
    .popup(function(d,feature) {
          return feature.properties.name+" : "+d.value;
      })
    .legend(dc_leaflet.legend().position('bottomright'));

    //https://github.com/dc-js/dc.js/issues/419
    usChart.on("preRender", function(chart) {
        chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
    })
    usChart.on("preRedraw", function(chart) {
        chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
    })
4

1 回答 1

1

我不是这里的专家，但 choropleth 期待地图数据而不是点数据。您的 geojson 中的功能是点：

{
    "crs": {
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        },
        "type": "name"
    },
    "features": [
        {
            "geometry": {
                "coordinates": [
                    -0.013071299999987,
                    51.510716
                ],
                "type": "Point"
            },
            "properties": {
                "id": "940GZZDLALL",
                "labelX": 30,
                "lines": [
                    {
                        "name": "DLR"
                    }
                ],
                "name": "All Saints",
                "tfl_intid": 850
            },
            "type": "Feature"
        },
        {
            "geometry": {
                "coordinates": [
                    0.061052699999989,
                    51.51427850000001
                ],
                "type": "Point"
            },
            "properties": {
                "id": "940GZZDLBEC",
                "labelX": -30,
                "lines": [
                    {
                        "name": "DLR"
                    }
                ],
                "name": "Beckton",
                "tfl_intid": 895
            },
            "type": "Feature"
        },
...

要绘制等值线，Leaflet 需要types 为多边形的特征。

所以我的猜测是 Leaflet 是在下注和绘制标记

于 2016-05-19T19:52:57.803 回答