jquery - 如何在 d3 中重新渲染 SVG？

Question

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

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

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

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
  });

});

现在，当我这样做时，没有有效的超链接，并且还会发生另外两个不良情况:首先， anchor 标记内的链接显示 xlink:href"URL"而不是 href:"URL"。其次，如果我将行 .attr("xlink:href", function(){ 更改为 .attr("href", function(){ ，它仍然不起作用。 所以，我想知道，这是因为 svg 已经渲染完毕，我需要使用这些新的和改进的 anchor 标记重新渲染它吗？还是我还缺少其他东西？ 任何帮助表示赞赏。谢谢!

附录:

   $(".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>

(注意未定义和“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 世界。

attr() jQuery 中的函数不能与函数一起使用，就像 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 中)进行尝试。