2016-04-26 6 views
0

D3だけでは、私が望む結果を得ることができましたが、DC.jsではいくつかの問題に直面しています。私の推測は、それは私の知識の欠如Crossfilterを使用します。Crossfilter with DC.js Choropleth map

私のCSVデータには、次のようになります。次のように

ccgcode,ccgname,metric,male,female 
06M,Great Yarmouth And Waveney,3,50,70 
05G,North Staffordshire,3,40,60 
... etc 

私のjavascriptは:そのコードのほとんど

'use strict' 

var numberFormat = d3.format(".2f"); 
var ccgMap  = dc.geoChoroplethChart('.map-wrap'); 
// var sexPieChart = dc.pieChart('.pie-chart'); 

d3.csv('../data/metricdata.csv', function (data) { 
    var data = crossfilter(data); 

    var ccgs = data.dimension(function (d) { 
     return d['ccgcode']; 
    }); 

    var ccgMetric = ccgs.group(); 

    d3.json("../data/ccg.json", function (map) { 
     ccgMap.width(800) 
      .height(800) 
      .dimension(ccgs) 
      .group(ccgMetric) 
      .colors(d3.scale.quantize().range(["#7cbd30", "#0066cc", "#ee2e11"])) 
      .colorDomain([0, 200]) 
      .colorCalculator(function (d) { return d ? ccgMap.colors()(d) : '#ccc'; }) 
      .overlayGeoJson(topojson.feature(map, map.objects.ccg).features, "CCGcode", function (d) { 
       return d.properties.CCGcode; 
      }); 

     dc.renderAll(); 
    }); 
}); 

は、私が from hereを得ました。だから私は後でいくつかの問題に直面するだろうと知っています。私は着色するようになりましたが、今は地図を見せてもらえません!

単純に空白のページが表示されます。 SVGがページに描画されているのがわかりますが、パス情報はありません。

enter image description here

私が間違って何をしているのですか? Crossfilterで見られるすべての例には非常に細かい粒度のデータがありますが、これはDBAが既にCCGコードグループにグループ化している私の状況で何をするかです。

なぜCrossFilterを気にしているのか分かりませんが、特定のCCG(特定の地図)をクリックします。

+0

パス情報がない場合は、マップが描画されていないと仮定します。これはoverlayGeoJSON呼び出しやマップデータの問題です。 JSFiddleやCodepenなどのサービスの実例をまとめると、より簡単に役立つでしょう。 –

+0

ありがとう@EthanJewett、コードは[こちら](http://finchcove.com/mapvis/)です。 – Ciwan

+0

XHRの問題がいくつかありましたが、私は今それらを修正しました。だからあなたは私が見ているもの、空白のページ( 'h1'だけを表示している)を見ているは​​ずです – Ciwan

答えて

1

私は表示するマップを持っているOKは、ここで私がやったことです:

  1. どうやらdc.geoChoroplethChart()だけ私が持っていたものであるGeoJSON、ないTopoJSONで動作します。私はthis toolを使って元に戻った。デフォルトでは、英国では動作しませんどのd3.geo.albersUsa()あるよう
  2. は、.projection()が使用するコード(like here)を得た

多くのおかげでthis threadXavierに行く(私のためではありませんでした)。

+1

これでいいですか?将来的には、実際の*編集可能な例を作成したほうが助けになる可能性が高いことに注意してください。ブラウザの開発ツールは改善されましたが、通常のWebサーバーよりもJSFiddleのようなコードを修正するのはずっと簡単です:-) –

+0

ありがとう@EthanJewett参照する外部ライブラリを持っていてもJSFiddleの周りに頭を浮かべることができません: – Ciwan

+0

左側の「外部リソース」セクションをクリックし、リソースのURLを追加します.HTTPを介して配信され、CORSを有効にする必要があります。つまり、Githubから直接ファイルを読み込むことはできません。 –

関連する問題