如何在D3.js中創建軸刻度標簽超鏈接

Question

在D3.js中，如何將HTML元素/屬性分配給刻度標簽？ 我特別感興趣的是使它們成為超鏈接，但它可以概括為使它們成為圖像，或者像交替的div類那樣奇怪。

var data = [{"count": 3125,"name": "aaa"}, {"count": 3004,"name": "bbb"}...

y = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.1)
    .domain(data.map(function (d) {
      return d.name;
    }))

yAxis = d3.svg.axis().scale(y)
vis.append("g")
   .attr("class", "y axis")
   .call(yAxis)

http://jsfiddle.net/SFDrv/

那么在JSfiddle中，我如何鏈接到www.example.com/aaa,www.example.com/bbb,www.example.com/ccc等？

Answer 1

對於您發布的JSfiddle，您可以創建所有字符串text的選擇（這些是y軸刻度），然后使用.on("click", function)鏈接每個標簽。 這是一個有效的例子：

d3.selectAll("text")
    .filter(function(d){ return typeof(d) == "string"; })
    .style("cursor", "pointer")
    .on("click", function(d){
        document.location.href = "http://www.example.com/" + d;
    });

我分叉你的JSFiddle並在那里有完整的例子： http ： //jsfiddle.net/mdml/Qm9U7/ 。

更好的解決方案是獲得一組y軸值並使用它們來過濾文檔中的text元素，而不是測試每個text元素的數據是否為字符串。 然而，最好的方法取決於代碼的其余部分，因此它可能因應用程序而異。

Answer 2

要使用圖像創建軸，您需要自己創建它們而不使用d3.svg.axis() 。 這會創建具有一定寬度的浮動li標簽......

// generate axis
x = d3.scale.linear().range([min, max]).domain([minValue, maxScaleValue]);
xAxis = d3.scale.identity().domain([minValue, maxScaleValue]);
var ticks = xAxis.ticks(10);
if (ticks.length) {
    var tickDiff = Math.abs(ticks[1] - ticks[0]);
    scope.legend
        .selectAll('li')
        .data(ticks)
        .enter()
        .append('li')
        .text(xAxis)
        .style('width', x(tickDiff));
}
scope.legend
    .selectAll("li")
    .data(ticks)
    .exit()
    .remove();

還有關於d3軸的有用文章對我幫助很大。