Question

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

enter image description here

我试图让日历中的每一天都被超链接。

为此，我在每个＆＃34; rect＆＃34;周围添加了一个锚标记，如下所示：

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＆＃34; URL＆＃34;而不是href：＆＃34; URL＆＃34; 。其次，如果我改变行.attr（＆＃34; xlink：href＆＃34;，function（）{to .attr（＆＃34; href＆＃34;，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>

（注意未定义和＆＃39; xlink：href＆＃39;而不仅仅是＆＃39; href＆＃39;）

 $(".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中都没有超链接（即鼠标指针没有任何区别，点击什么都不做。）我也改变了＆＃39; xlink：href＆＃39;到了＆＃39; href＆＃39;在2例中。这输出与上面相同，但使用＆＃39; xlink：＆＃39;失踪。但是，和以前一样，没有任何超链接。感谢。

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）。

如何在d3中重新渲染SVG？

1 个答案: