Question

我在d3.js有一张简单的NYC自治市镇地图。我想为每个行政区添加一个链接，但我无法弄清楚如何这样做。

以下是我现在的代码 - 只有一个占位符链接到纽约时报网站。但是，它会在<a href>标记内添加<path>，但这不起作用。我如何附上链接？这可能吗？

谢谢！

<!DOCTYPE html>
    <meta charset="utf-8">

    <style>
    #boroughs {
      stroke: none;
        stroke-width: 0px;
        fill: #ddd;
        opacity:.7;
        position:absolute;
        top:0;
        left:0;
    }
    </style>

    <script src="http://d3js.org/d3.v3.min.js"></script>

    <body>
    <script>

    // map
    var width = Math.max(960, window.innerWidth),
        height = Math.max(500, window.innerHeight);

    var container = d3.select("body").append("div")
            .attr("id", "container")
            .style("width", width + "px")
            .style("height", height + "px");

    var projection = d3.geo.mercator()
            .center([-73.94, 40.70])
            .scale(80000)
            .translate([(width) / 2, (height)/2]);

    var path = d3.geo.path()
            .projection(projection);

    d3.json("nyc.json", function(error, nyb) {

    var map = container.append("svg")
            .attr("id", "boroughs")
            .style("width", width + "px")
            .style("height", height + "px")
            .selectAll("path")
            .data(nyb.features)
            .enter().append("path")
            .attr("class", function(d){ return d.properties.borough; })
            .attr("d", path)
            .attr("xlink:href", "http://www.nytimes.com");
    });


    </script>
    </body>
    </html>

Answer 1

您可以将点击侦听器附加到路径并打开窗口，如var win = window.open(YOUR_URL, "_blank")：

var map = container.append("svg")
        .attr("id", "boroughs")
        .style("width", width + "px")
        .style("height", height + "px")
        .selectAll("path")
        .data(nyb.features)
        .enter().append("path")
        .attr("class", function(d){ return d.properties.borough; })
        .attr("d", path)
        .on("click", function(d){var win = window.open(YOUR_URL, "_blank"); win.focus();});
});

Answer 2

基本上有两种方法可以添加到SVG形状的链接：

使用<svg:a>元素。正如您在问题中已经说明的那样，如果它嵌套在应添加链接的元素中，则不起作用。与HTML中的同名元素非常相似，您需要将<a>包裹在应附加链接的内容周围。

var map = container.append("svg")
        .attr("id", "boroughs")
        .style("width", width + "px")
        .style("height", height + "px")
      .selectAll("path")
        .data(nyb.features)
        .enter()
        .append("a")                                     // The link goes here...
          .attr("xlink:href", "http://www.nytimes.com")                                     
        .append("path")                                  // ...wrapping the path.
          .attr("class", function(d){
            return d.properties.borough;
          })
          .attr("d", path);

正如Cyril's answer中所述，您可以附加处理click事件的JavaScript事件监听器。

如何在D3.js中添加地理链接（作为json路径创建）？

2 个答案: