1

私は、小地域の統計を含むプロジェクトのいくつかのプロトタイプの 1 つとして、D3 マップに取り組んでいます。私は単純なマップから始めており、D3 は初めてです。

しきい値または分位スケールを使用して、色の範囲を表示できませんでした。すでに存在する他の多くの例を試すために、少なくとも 6 つの例を作成しましたが、領域に表示する範囲を取得できません。近くにいることは知っていますが、欠けているものがあります。

私の例は、 https://github.com/Monduiz/OL-explorerの git にあります。私が間違っていることを理解するのに役立つ洞察をいただければ幸いです。

これが私が使用しているコードで、ファイルは上記のリンクから入手できます。

var width = 960,
    height = 500;

var colors = d3.scale.quantize()
    .domain([0, 1])
    .range(colorbrewer.YlOrRd[7]);

var projection = d3.geo.azimuthalEqualArea()
    .rotate([100, -45])
    .center([5, 20])
    .scale(800)
    .translate([width/2, height/2])

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "OLMCSDfr.json")
    .defer(d3.csv, "data.csv")
    .await(ready);

function ready(error, can, OLM) {
  var PopById = {};

OLM.forEach(function(d) { PopById[d.Id] = +d.OLMnb; });

  svg.append("g")
    .attr("class", "SDR")
    .selectAll("path")
    .data(topojson.feature(can, can.objects.OLMCSDfr).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) { return colors(PopById[d.Id]); });
  }

4

1 に答える 1

2

関数では、現在未定義の各 topojson 機能をready参照しています。d.Id

渡された関数を代わりfillにグラブに切り替えました。d.properties.SDRIDこれは topojson 機能とOLMリスト要素の両方にあります。forEachステートメントも一致するように変更する必要があります。

これはうまくいくようです：

function ready(error, can, OLM) {
  var PopById = {};

  OLM.forEach(function(d) { PopById[d.SDRID] = +d.OLMnb; });

  svg.append("g")
      .attr("class", "SDR")
    .selectAll("path")
      .data(topojson.feature(can, can.objects.OLMCSDfr).features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        return colors(PopById[d.properties.SDRID]); });

}
于 2014-11-15T18:02:00.153 に答える