我最近开始玩d3.js和json,在其他帖子中找不到答案之后,我直接在这里说出我的问题。 我想知道是否有可能用d3库完成以下任务:
我根据Scott Murray的书 - 交互式数据可视化(https://github.com/alignedleft/d3-book)制作了加载和投影的geojson文件的工作示例
这是我的代码(来自书):
<html>
<head>
<title>Zoom/pan map example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
</html>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([500]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "steelblue");
});
</script>
<body>
</html>
现在, 我想 - 让我们说 - 多边形代表州华盛顿(左上角)可点击,“持有”超链接。换句话说 - 是否可以将超链接附加到该多边形? 第二件事 - 是否可以将文本(状态数字)插入多边形,以便文本保留在多边形内而不跨越其边界?
我希望它清楚,如果有足够的技术人员可以为这个问题提供解决方案,我将感激不尽。