2

を使用してダッシュボードを作成しようとしていdc.jsます。いくつかのチャートと choroplethChart があります。すべてうまくいきましたが、リーフレットをマップに追加する必要がありました。このサンプルに従ってライブラリを使用しましdc.leaflet.jsたが、choroplethChart の代わりにマーカーを返します (図を参照)。ここに画像の説明を入力

(これは、リーフレットを使用する前ここに画像の説明を入力 の外観です) コードは以下であり、これは 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

私はここの専門家ではありませんが、コロプレスは点データではなく地図データを期待しています。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 が Polygon であるフィーチャを必要とします。

だから私の推測では、リーフレットはマーカーをパントして描画しています

于 2016-05-19T19:52:57.803 に答える