Javascript D3中没有渲染贴图
我试图遵循Scott Murray在其文本书中使用时区geojson文件展示的Choropleth示例。问题是我的地图没有被渲染,整个SVG都被绿色填充。下面是我的代码,我想知道我在渲染地图时是否做错了什么。我使用每个时区下的值在地图中填充颜色。如下图所示Javascript D3中没有渲染贴图,javascript,d3.js,geojson,Javascript,D3.js,Geojson,我试图遵循Scott Murray在其文本书中使用时区geojson文件展示的Choropleth示例。问题是我的地图没有被渲染,整个SVG都被绿色填充。下面是我的代码,我想知道我在渲染地图时是否做错了什么。我使用每个时区下的值在地图中填充颜色。如下图所示 <script> var width = 1000; var height = 600; var d = []; var projection = d3.geo.mercator()
<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最终看起来是这样的-
可能有很多错误,你能举一个提琴或要点作为例子吗?我怀疑你的问题在于var projection=d3.geo.mercator.translate[width/2,height/2].scale[500];块您只需要传递一个标量而不是数组,因此请删除[]。您可能还需要设置地图的中心。试着看看这个[bl.ock]。将比例更改为标量并没有多大帮助@BenLyall这里是我解决问题的要点的链接。我以错误的方式呈现时区json文件,所以我修复了它。我也会更新要点。非常感谢。