没有在D3中渲染的地图

时间:2015-04-28 03:43:12

标签: javascript d3.js geojson

我正在尝试使用时区geojson文件遵循Scott Murray(在他的教科书中显示)的Choropleth示例。问题是我的地图没有渲染,整个SVG都充满了绿色。我的代码如下,我想知道我在渲染地图时是否做错了。我使用每个时区下的值填充地图中的颜色。(如下图所示)。

  <script>
  var width = 1000;
  var height = 600;

  var d = [];
  var projection = d3.geo.mercator()
                .translate([width/2, height/2])
                .scale([500]);

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

  var color = d3.scale.ordinal().range(colorbrewer.YlGn[9]);

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

  d3.json('scm-timezone.json', function(data){
  var com = data.commits;
  d.push(com);
  color.domain([
   d3.min(d[0]),
   d3.max(d[0])
  ]);

 d3.json("world.json", function(json){

 for(var i = 0;i < data.tz.length;i++){

  var dataTZ = data.tz[i];

  var commitValue = parseInt(data.commits[i]);

  for(var j = 0;j<json.features.length;j++){

    var jsonTZ = json.features[j].properties.description;

    if(dataTZ == jsonTZ) {

      json.features[j].properties.value = commitValue;

    }
  }
}
svg.selectAll("path")
    .data(json.features)
    .enter() 
    .insert("path")
    .attr("d",path)
    .style("fill", function(d) {
      var val = d.properties.value;
      if(val){ return color(val); }
      else { return "white"; }
            });
        });
     });

</script>

我的world.json最终看起来像这样 -

enter image description here

0 个答案:

没有答案