Javascript 为colorbrewer呈现d3.js库可视化
我正在尝试实现渲染欧盟d3地图,可视化不同组成国家的数据 当我尝试执行本教程的最后一步时,使用以下功能结合d3.js库,根据数据以不同的方式为国家着色:Javascript 为colorbrewer呈现d3.js库可视化,javascript,d3.js,Javascript,D3.js,我正在尝试实现渲染欧盟d3地图,可视化不同组成国家的数据 当我尝试执行本教程的最后一步时,使用以下功能结合d3.js库,根据数据以不同的方式为国家着色: queue() .defer(d3.json, "eu.json") .defer(d3.json, "data.json") .await(ready); function ready(error, europe, data) { if (error) return console.error(error);
queue()
.defer(d3.json, "eu.json")
.defer(d3.json, "data.json")
.await(ready);
function ready(error, europe, data) {
if (error) return console.error(error);
var quantize = d3.scale.quantile()
.domain(d3.extent(d3.values(data), function (d) { return d.value; }))
.range(d3.range(6)),
cb = "Reds";
function fill(datum, index) {
var iso = datum.properties.iso_n3,
val = data[iso] && data[iso].value;
if (val) {
var c = colorbrewer[cb][6][quantize(val)];
return c;
} else {
return "lightgray";
}
}
var svg = d3.select("#container").append("svg")
.attr("width", width)
.attr("height", height);
var eu = topojson.feature(europe, europe.objects.europe),
countries = eu.features;
projection.scale(1).translate([0, 0])
var b = path.bounds(eu),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection.scale(s).translate(t);
svg.selectAll("path")
.data(countries)
.enter().append("path")
.attr("d", path)
.attr("class", "country")
.classed("eu-country", isEuCountry);
svg.selectAll(".eu-country")
.style("fill", fill);
}
程序崩溃,我的浏览器没有加载任何内容
我已经把范围缩小到那个代码了
也许更熟悉Javascript的人能够找出这里的问题所在
组件中命名的文件:
queue()
.defer(d3.json, "eu.json")
.defer(d3.json, "data.json")
.await(ready);
与我的index.html文件位于同一目录中。所以这不是问题所在 您需要以这种方式包括coldbrewer,就像java include语句一样
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
你说它崩溃是什么意思?你是如何将它缩小到你发布的代码的范围的?你能上传到某个地方并添加指向这两个文件eu.json、data.json的链接,这样就可以在另一台计算机上复制代码了吗?同时,你可能会对这个欧盟地图的例子感兴趣:我解决了这个问题,并把它作为一个答案发布了出来