如何在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）。