这是一个益智游戏。添加图例缩放代码后,Alabama的状态未显示在美国地图上。像这样:
我把它缩小到最后的g.call(xAxis)
,这似乎是个问题。当我评论它时,阿拉巴马州在地图上显示。像这里:
这是一个错误吗?或者我错过了什么?这是代码。
<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>