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

时间:2015-03-15 11:41:58

标签: javascript json d3.js

我最近开始玩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>

现在, 我想 - 让我们说 - 多边形代表州华盛顿(左上角)可点击,“持有”超链接。换句话说 - 是否可以将超链接附加到该多边形? 第二件事 - 是否可以将文本(状态数字)插入多边形,以便文本保留在多边形内而不跨越其边界?

我希望它清楚,如果有足够的技术人员可以为这个问题提供解决方案,我将感激不尽。

1 个答案:

答案 0 :(得分:1)

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

这可能是要走的路