Question

我是D3的新手，并且根据http://bl.ocks.org/robschmuecker/7880033和http://bost.ocks.org/mike/map/上的示例创建了图表。我在这个网站的其他地方发现了D3 tree graph with links）如何将树形图中的节点标签链接到另一个页面。然而，当我尝试与地图类似的东西时，它根本不起作用，我试图找出原因。我已经使用Firefox Web检查器来查看输出中真正发生的更多内容，但仍然感到困惑。树形图中的链接在Web检查器中如下所示：

<a xlink:href="www.example.com">
  <text style="fill-opacity: 1;" text-anchor="end" dy=".35em" x="-10">Example text</text>
</a>

这些工作与任何其他链接一样。地图中的那些看起来像这样：

<a xlink:href="www.example.com">
  <text style="text-anchor: end; fill: yellow;" dy=".35em" x="-6" transform="translate(1181.2709561800666,621.4893776251483)" class="place-label">Example text</text>
</a>

这些根本不起作用。文本显示应该，但如果我点击它们没有任何反应。这是我用来生成它们的代码：

svg.selectAll(".place-label")
.data(places.features)
.enter().append("a")
.attr("xlink:href", function(d) {return "www.example.com"})    
.append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
.attr("dy", ".35em")
.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; })
.style("fill", function(d) {return d.properties.level;})
.text(function(d) { return d.properties.name; });

请注意，倒数第二行中的“level”属性来自我在将其转换为JSON之前添加到包含CSV格式的城市信息的文件中的列，并且分配给“href”属性的值将被替换为基于我添加到此文件的另一列的内容。

更新：我尝试将代码更改为：

svg.selectAll(".place-label")
.data(places.features)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
.append("a")
.attr("xlink:href", function(d) {return "www.example.com"})    
.append("text")
.attr("class", "place-label")
.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
.attr("dy", ".35em")
.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; })
.style("fill", function(d) {return d.properties.level;})
.text(function(d) { return d.properties.name; });

点击它们仍然无效。

相应的HTML现在看起来像这样：

<g transform="translate(1181.2709561800666,621.4893776251483)">
  <a xlink:href="www.example.com">
    <text style="text-anchor: end; fill: yellow;" dy=".35em" x="-6" class="place-label">Example Text</text>
  </a>
</g>

Answer 1

我终于明白了。以下是脚本的样式部分对文本元素的含义：

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  pointer-events: none;
}

评论“指针事件：无;”就这么做了。

添加到D3地图的链接

1 个答案: