dc.js 和 dc.leaflet.js；返回的地图类型错误

Question

我正在尝试使用 dc.js 制作仪表板。它有一些图表和一个 choroplethChart。一切正常，但我需要在地图上添加传单。我关注了 this sample and used dc.leaflet.js library, but instead of choroplethChart it returns Markers (see picture)

（这是使用传单之前的样子）代码如下 this is where geojson resides:

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

Answer 1

我不是这方面的专家，但是等值线需要地图数据而不是点数据。您的 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 需要 type 是多边形的特征。

所以我的猜测是 Leaflet 正在踢球和画标记

dc.js 和 dc.leaflet.js；返回的地图类型错误

dc.js and dc.leaflet.js; wrong type of map returned

leaflet

dc.js

dc.leaflet.js