阿拉巴马州没有在我的地图上展示

时间:2015-09-14 01:12:53

标签: d3.js

这是一个益智游戏。添加图例缩放代码后,Alabama的状态未显示在美国地图上。像这样:

missing alabama

我把它缩小到最后的g.call(xAxis),这似乎是个问题。当我评论它时,阿拉巴马州在地图上显示。像这里:

enter image description here

这是一个错误吗?或者我错过了什么?这是代码。

<script>
var w = 800;
var h = 600;

var svg = d3.select("#us-map")       
        .append('svg')
        .attr('w',w+'px')
        .attr('h',h+'px');

var projection = d3.geo.albersUsa()
.translate([w/2,h/2])
.scale(1000) 

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

///////////////////// /legend  

var color = d3.scale.threshold()
  .domain([75, 150, 225, 300])
  .range(["#ffffcc", "#c2e699", "#78c679", "#31a354", "#006837"]);

var x = d3.scale.linear()
.domain([0, 390])
.range([0, 240]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(13)
.tickValues(color.domain());

var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(40,40)");

g.selectAll("rect")
.data(color.range().map(function(d, i) {
  return {
    x0: i ? x(color.domain()[i - 1]) : x.range()[0],
    x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
    z: d
  };
 }))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return d.x0; })
.attr("width", function(d) { return d.x1 - d.x0; })
.style("fill", function(d) { return d.z; });

g.call(xAxis)
.append("text")
.attr("class", "caption")
.attr("y", -6)
.text("Population per square mile");


d3.csv("expenses.csv", function(data) {

data.forEach(function(d) {   
d.value = +d.value; 
  });
            color.domain([
            d3.min(data, function(d) { return d.value; }),
            d3.max(data, function(d) { return d.value })
    ]);

 d3.json("us-states.json", function(json) { 

   for (var i = 0; i < data.length; i++) {
         var dataState = data[i].state;
         var dataValue = parseFloat(data[i].value);

          for (var j = 0; j < json.features.length; j++) {
       var jsonState = json.features[j].properties.name;    
        if (dataState == jsonState) {
            json.features[j].properties.value = dataValue;      
            break;              
        }
    }       
 }

 svg.selectAll("path")
     .data(json.features)
     .enter()
     .append("path")
     .attr("d", path)
     .style("stroke","#ccc")
     .style("fill", function(d) {

 var value = d.properties.value;                            
    if (value) {
        return color(value);
    } else {
       return "#000";
                       }
 })

     });
});

</script>

0 个答案:

没有答案