如何在 d3 中重新渲染 SVG？

Question

我正在调整位于此处的 d3 示例日历：http://bl.ocks.org/4063318

我正在努力让日历中的每一天都带有超链接。

为此，我在每个“矩形”周围添加了一个锚标记，如下所示：

var rect = svg.selectAll(".day")
  .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter()
  .append("a")                                   //my new line of code
  .attr("xlink:href", "http://stackoverflow.com") //my new line of code
  .append("rect")
  .attr("class", "day")
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) { return week(d) * cellSize; })
  .attr("y", function(d) { return day(d) * cellSize; })
  .datum(format);

这会将每个矩形链接到该网站。但是，我希望链接依赖于数据。 所以，而不是上面的行：

  .attr("xlink:href", "http://stackoverflow.com") //my new line of code

我使用：

  .attr("class", "rectAnchor")

我这样做是为了我可以选择 rectAnchor，然后访问他们的 rect 子节点，然后在下面的代码中设置 xlink:href 属性，如下所示：

d3.csv("dji.csv", function(error, csv) {
  var data = d3.nest()
    .key(function(d) { return d.Date; })
    .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
    .map(csv);

  rect.filter(function(d) { return d in data; })
      .attr("class", function(d) { return "day " + color(data[d]); })
      .attr("dyanmiclinktext", function(d) { return data[d]; })  //my new line of code
      .select("title")
      .text(function(d) { return d + ": " + percent(data[d]); });


  $(".rectAnchor")                                       //my new line
  .attr("xlink:href", function(){                             //my new line
     return "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("dynamiclinktext"); //my new line
  });

});

现在，当我这样做时，没有可用的超链接，另外两件不受欢迎的事情发生了：首先，锚标记内的链接说 xlink:href"URL" 而不是 href:"URL" 。其次，如果我将 .attr("xlink:href", function(){ 行更改为 .attr("href", function(){ ，它仍然不起作用。 所以，我想知道，这是因为 svg 已经被渲染了，我需要用这些新的和改进的锚标签重新渲染它吗？还是我还缺少其他东西？ 任何帮助表示赞赏。谢谢！

附录：

   $(".rectAnchor").attr("xlink:href", "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("finer"));

生成：

<a class="rectAnchor" xlink:href="http:/127.0.0.1/subdir/undefined">
<rect class="day" width="17" height="17" x="170" y="51" finer="group1" fill="#aec7e8">
<title>2012-03-13: group1</title>
</rect>
</a>

（注意 undefined 和 'xlink:href' 而不仅仅是 'href'）

 $(".rectAnchor").attr("xlink:href", function(d) { return "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("finer");});

生成：

 <a class="rectAnchor" xlink:href="http:/127.0.0.1/subdir/group2">
 <rect class="day" width="17" height="17" x="153" y="34" finer="group2" fill="#aec7e8">
 <title>2012-03-05: group2</title>
 </rect>
 </a>

在显示的 svg 中两者都没有超链接（即鼠标指针没有任何区别，单击没有任何作用。） 在这两种情况下，我还将 'xlink:href' 更改为 'href'。这与上面的输出相同，但缺少“xlink：”。然而，和以前一样，没有任何东西是超链接的。谢谢。

Answer 1

在您使用 $(".rectAnchor") 的地方，您现在处于 jQuery 世界——而不是 d3 世界。

jQuery 中的 attr() 函数不适用于函数，就像 d3 的 attr() 一样。

你只需要：

$(".rectAnchor").attr(
  "xlink:href",
  "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("dynamiclinktext")
);

假设没有其他问题，这应该可行。

编辑：

实际上，我没有注意到$(".rectAnchor") 产生多个元素。你需要混合你之前的尝试和我上面的建议：

$(".rectAnchor").each(function(i, element) {
    var $el = $(element);// $(this) would work too
    $el.attr("xlink:href", "http://127.0.0.1/subdir/" + $el.children("rect").attr("dynamiclinktext"));
});

请注意，在您拥有http:/127... 的地方，您实际上需要http://127....（即您缺少斜线）。

最后，您确定用<a> 标签包装SVG 元素确实可以使它们成为链接吗？可能会，但我从未尝试过。如果您不确定，您应该使用手动生成的 SVG（即没有 javascript）将其作为独立测试（例如在 jsFiddle 中）进行尝试。