d3.js，是否可以将超链接附加到GeoJSON文件

d3.js, is it possible to append hyperlinks to GeoJSON file?

本文关键字：GeoJSON 文件 超链接 js 是否 d3      更新时间：2023-09-26

我最近开始使用 d3.js 和 json，在其他线程中找不到答案后，我直接在这里陈述我的问题。我想知道是否可以使用 d3 库完成以下任务：

我有根据斯科特·默里（Scott Murray）的书制作的加载和投影geojson文件的工作示例 - 交互式数据可视化（https://github.com/alignedleft/d3-book）

这是我的代码（来自书）：

<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>
  • 第 12 章 - https://github.com/alignedleft/d3-book/tree/master/chapter_12 中的 JSON 文件

现在我希望 - 比方说 - 代表华盛顿州（左上角）的多边形是可点击的，"持有"超链接。换句话说 - 是否可以将超链接附加到该多边形？第二件事 - 是否可以将文本（州号）插入多边形中，以便文本保留在多边形内而不是越过其边界？

我希望它很清楚，如果有人足够熟练的人可以为这个问题提供解决方案，我将不胜感激。

Svg 有一个 <a> 标签，你可以动态插入：http://www.w3schools.com/svg/svg_text.asp。

这可能是要走的路

相关文章：