如何在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，然后访问他们的矩形的孩子，然后设置的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 
    }); 

}); 

现在，当我这样做，没有工作的超链接和其他两种不良的事情发生了：首先，锚TA内的链接g表示xlink：href“URL”而不是href：“URL”。其次，如果我改变行.attr（“xlink：href”，function（）{to .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> 

（注意未定义和 '的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是超链接（即鼠标指针没有任何区别，点击什么也没有。） 我还在2种情况下将'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....（即你缺少一个斜杠）。

最后，你确定包装SVG元素<a>实际上是为了让它们链接吗？它可能，但我从来没有尝试过。如果你不确定，你应该用手动生成的SVG作为独立测试（比如说，jsFiddle）来试用它（即没有javascript）。