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

时间:2016-05-19 04:44:42

标签: leaflet dc.js dc.leaflet.js

我正在尝试使用dc.js创建一个信息中心。它有一些图表和一个choroplethChart。这一切都很好,但我需要在地图上添加传单。我已关注this sample并使用dc.leaflet.js库,但不是choroplethChart而是返回标记(参见图片)enter image description here

(这是使用传单之前的样子)enter image description here 代码位于以下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()));
    })

1 个答案:

答案 0 :(得分: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正在撑船并绘制标记