我想把我的地图放在d3.js中心。我找到了这个代码并且稍微改变了一点。我无法做到这一点。我收到了这个错误。我该如何解决呢?我是javascript的新手。
这是我的代码。
PolygonAndMarkerClickListener polygonAndMarkerClickListener = new PolygonAndMarkerClickListener();
map.setOnPolygonClickListener(polygonAndMarkerClickListener);
map.setOnMarkerClickListener(polygonAndMarkerClickListener);
这是我的json国家数据的一部分。
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Set a style for our worldshape-data -->
<style>
path {
stroke: red;
stroke-width: 0.5px;
fill: steelblue;
}
</style>
<body>
<!-- implementation of the hosted D3- and TopoJson js-libraries -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<!-- map creation -->
<script>
// canvas resolution
var width = 1000,
height = 600;
// defines "svg" as data type and "make canvas" command
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// shorten the svg.append command
var g = svg.append("g");
// load data and display the map on the canvas with country geometries
d3.json("turkey.json", function(error, topology) {
var projection = d3.geo.mercator().scale(1).translate([0, 0]).precision(0);
var path = d3.geo.path().projection(projection);
var bounds = path.bounds(topology);
var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
(bounds[1][1] - bounds[0][1]) / height);
var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
(height - scale * (bounds[1][1] + bounds[0][1])) / 2
];
projection.scale(scale).translate(transl);
g.selectAll("path")
.data(topojson.object(topology, topology.objects.turkeytopo)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan functionality
var zoom = d3.behavior.zoom()
.on("zoom", function() {
g.attr("transform", "translate(" +
d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
</body>
</html>
答案 0 :(得分:0)
您没有正确使用path.bounds
。来自API文档path.bounds
返回投影的平面边界框(通常以像素为单位) 指定的GeoJSON对象。 (v4)
这些组件使用GeoJSON格式 - 一种标准的表示方式 JavaScript中的地理特征。 (v3)
您正在传递path.bounds topojson对象,请尝试:
var bounds = path.bounds(topojson.feature(topology, topology.objects.turkeytopo));
您也可以始终使用居中坐标,如拓扑中的bbox属性所示。投影看起来像:
var projection = d3.geo.mercator()
.scale(2000)
.center([34.5,38.5])
.translate([width/2,height/2]);
比例取决于svg大小。