将锚标记添加到附加了 D3 的 SVG 圆圈

Question

我有一个用 D3 生成的 SVG 符号映射。该地图包含 100 多个符号。我的问题是，如何为每个单独的圈子添加一个锚标签？我将从外部 CSV 文件中提取每个符号的链接，但此时我无法弄清楚如何为每个符号添加锚点。

我的符号生成/附加如下：

circles.selectAll("circles")
            .data(schools)
            .enter().append("svg:circle")
            .attr("cx", function(d,i) {return positions[i][0]})
            .attr("cy", function(d,i) {return positions[i][1]})
            .attr("r", function(d,i) {return 6})
            .attr("i", function(d,i) {return i})
            .attr("class", "symbol")
            .on("mouseover", function(d,i){
                    var index = $(this).attr("i");
                    // console.log(d);  ****This is all the data - ie: Name, lat, long, index, state, etc..
                    return show_bubble(d, index);
            }).on("mouseout", function(){
                    return hide_bubble();
            }).on("mousemove", function() {
                    return move_bubble();
            })

我试过了：

d3.selectAll("#circles")
    .append("a")
    .attr("href", "google.com");

然而，这只是将我的整个组包含在一个锚标记中的符号。

请帮忙！

Answer 1

我通常在圆圈中做文本的方式是我对数据进行另一个绑定，但我不会附加圆圈，而是附加文本。

所以代码可能如下所示：

circles.selectAll("circle-text")
  .data(schools)
  .enter().append("text")
  .attr("x", function(d,i) {return positions[i][0]})
  .attr("y", function(d,i) {return positions[i][1]})
  .text( function (d) { return "Hello World" });

如果您想要锚标签而不是纯文本，请尝试阅读以下示例：Hyperlinks in d3.js objects

您似乎需要一个特殊元素：“svg:a”来创建超链接。

希望这会有所帮助。