(抱歉我的英语水平不好)嗨,我第一次使用 D3 和 mithril js。地图没问题,但我对省份的颜色有疑问,它来自“d”属性来获取省份的 id。该属性未定义,我不明白“d”到底是什么。是秘银的问题吗?还有其他方法可以获取“d”属性吗?
controller.map = function(el){
var width = 1160;
var height = 960;
var scale = 10000;
var offset = [width / 2, height / 2];
var center = [0, 50.64];
var rotate = [-4.668, 0];
var parallels = [51.74, 49.34];
var projection = d3.geo.albers()
.center(center)
.rotate(rotate)
.parallels(parallels)
.scale(scale)
.translate(offset)
;
var path = d3.geo.path()
.projection(projection)
;
var svg = d3.select(el).append("svg")
.attr("width",width)
.attr("height",height)
;
d3.json("belprov.json",function(error,be){
if (error) return console.error(error);
var bounds = path.bounds(topojson.feature(be, be.objects.subunits));
var hscale = scale*width / (bounds[1][0] - bounds[0][0]);
var vscale = scale*height / (bounds[1][1] - bounds[0][1]);
scale = (hscale < vscale) ? hscale : vscale;
offset = [width - (bounds[0][0] + bounds[1][0])/2,
height - (bounds[0][1] + bounds[1][1])/2];
var centroid = d3.geo.centroid(topojson.feature(be, be.objects.subunits));
center = [0, centroid[1]];
rotate = [-centroid[0],0];
projection = d3.geo.albers()
.center(center)
.rotate(rotate)
.parallels(parallels)
.scale(scale)
.translate(offset);
svg.selectAll(".province")
.data(topojson.feature(be, be.objects.provinces).features)
.enter().append("path")
.attr("class", function(d) { return "province " + d.id })
.attr("d", path)
;
})
};
Run Code Online (Sandbox Code Playgroud)
路径对象中的属性"d"定义路径必须经过的点的连续坐标(它还指示路径是否应使用贝塞尔曲线、直线等)。请参阅此处的一些文档。
注意:在 d3 中,d通常用作匿名函数的参数,表示当前绑定到当前元素的数据。所以两者是完全不同的东西。
在这里,你的线
.attr("d", path)
Run Code Online (Sandbox Code Playgroud)
可能应该看起来更像
.attr("d", function(d){return d.path})
Run Code Online (Sandbox Code Playgroud)
path即,获取数据元素内的字段。
| 归档时间: |
|
| 查看次数: |
11884 次 |
| 最近记录: |