2016-05-19 4 views
2

dc.jsを使用してダッシュボードを作成しようとしています。それはいくつかのチャートとchoroplethChartを持っています。それはうまくいきましたが、地図にリーフレットを追加する必要がありました。私はthis sampleを踏襲し、dc.leaflet.jsライブラリを使用し、代わりchoroplethChartのそれはマーカー(写真参照)enter image description heredc.jsとdc.leaflet.js;間違ったタイプのマップが返されました

(これは、それはリーフレットを使用する前に見てどのようである)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())); 
    }) 
+0

これは非常に奇妙です。 [メインページの例](http://dc-js.github.io/dc.leaflet.js/)に従ったことを意味しますか?これをトラブルシューティングするための完全な例を共有できますか? – Gordon

答えて

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" 
     }, 
... 

choroplethを描画するには、リーフレットは、そのtypeのポリゴンな機能が必要になります。

私の推測では、リーフレットはパンチしてマーカを描いているということです。

+0

それはリーフレットの制限だと思いますか?それはそれを修正するのが少し難しくなります。純粋なdc.jsを使ってどのように見えるかの写真を追加しました – Pep

+0

少し関係のない質問ですが、宛先選択(下の棒グラフ)に基づいてマップがフィルタリングされていない理由を知っていますか?マップは他のプロットをフィルタリングできますが、その逆はできません。 – Pep

+1

いいえ、表示したい地域のアウトラインを入力する必要があります。ブルガリアの州の概要を使用しているdc.leaflet.jsの例を参照してください。たとえば、ロンドンのポストコードの概要を知りたいとします。これがあなたのデータであれば、それらの地域に基づいて集計する必要があります。 – Gordon

関連する問題