D3 - x軸的標籤是鏈接

Question

我想使x軸的標籤可點擊以便文本包含鏈接。

這裏是我的代碼小提琴至今：http://jsfiddle.net/3gLfb401/

x軸標籤包含日期和版本號的。內部版本號應該是一個鏈接。 在這個例子中，它應該是足夠的，如果它鏈接到google.com或其他東西。

我已經在網上搜索，發現了一些東西，可能會這樣做，但我不知道如何放置它。

我覺得這樣的事情可以工作：

x.html(d3.time.format("%Y-%m-%d")(d.date) + '<a href= "http://google.com" target="_blank">' + "#" + d.buildNb + "</a>") 

這是目前形成了標籤的文本的方法是：

function formatDataToTick(d) { 
    return d3.time.format("%Y-%m-%d")(d.date) + " #" + d.buildNb; 
} 

Answer 1

試試這個。

var xLabels = svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", function(d) { 
     return "rotate(-65)" 
    }); 

var insertTspans = function(a) { 
    var b = a.split(" "); 
    var textNode = d3.select(this); 
    textNode.text(""); 
    textNode.append("tspan").text(b[0]); 
    var link = textNode.append("tspan").text(b[1]); 
    link.style("cursor", "pointer") 
     .style("fill","blue") 
     .style("text-decoration","underline") 
     .on("click", function(a) { 
     document.location.href = "http://www.example.com/" + a; 
     }); 
}; 

xLabels.each(insertTspans);