2

在 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 等？

4

2 回答 2

4

对于您发布的 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元素的数据是否为字符串。但是，最好的方法取决于代码的其余部分，因此它可能因应用程序而异。

于 2013-11-11T20:00:08.147 回答
0

要使用图像创建轴，您需要自己创建它们，而不是使用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 轴的有用文章对我有很大帮助。

于 2014-12-03T11:22:43.117 回答