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”以便创建超链接。

希望这有帮助。

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

1 个答案: