D3.js旋转垂直条形图标签

时间:2015-06-16 12:00:55

标签: javascript html d3.js

我是D3.js的新手,并使用D3.js中的以下示例为我的某个网络应用程序创建一个简单的信息中心。

http://bl.ocks.org/NPashaP/96447623ef4d342ee09b

我的要求是将每个条形的顶部值标签垂直旋转90度。

我通过添加"转换"更改了以下方法属性。然后标签没有正确对齐。

//Create the frequency labels above the rectangles.
        bars.append("text").text(function(d){ return d3.format(",")(d[1])})
            .attr("x", function(d) { return x(d[0])+x.rangeBand()/2; })
            .attr("y", function(d) { return y(d[1])-5; })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) { return "rotate(-90)" });

我试图找到解决方案很长时间但不能。我的代码链接如下。

https://jsfiddle.net/vajee555/7udmyj1k/

有人可以告诉我如何存档吗?

谢谢!

修改 我在这里解决了这个问题。

http://jsfiddle.net/vajee555/7udmyj1k/5/

2 个答案:

答案 0 :(得分:1)

请记住,当您旋转元素时,xy坐标会发生变化:它们不再相对于图表的坐标,而是相对于元素的新旋转方向。因此,您需要以不同方式计算xy属性。

通过旋转-90deg,您的x轴将翻转为y,y将翻转为-x:

enter image description here

我做了一些小的像素调整,使其看起来美观,例如我添加到y坐标的+8和我添加到x坐标的+5,但罚款调整取决于你。

// Create the frequency labels above the rectangles.
bars.append("text").text(function(d){ return d3.format(",")(d[1])})
    .attr('transform', 'rotate(-90)')
    .attr("y", function(d) { return x(d[0]) + x.rangeBand()/2 + 4; })
    .attr("x", function(d) { return -y(d[1]) + 5; });

另外,更改hG.update()函数中的坐标计算方式:

// transition the frequency labels location and change value.
bars.select("text").transition().duration(500)
    .text(function(d){ return d3.format(",")(d[1])})
    .attr("x", function(d) { return -y(d[1]) + 5; });

请在此处查看工作小提琴:https://jsfiddle.net/teddyrised/7udmyj1k/2/

答案 1 :(得分:0)

//Create the frequency labels above the rectangles.
    bars.append("text").text(function(d){ return d3.format(",")(d[1])})
        .attr("x", function(d) { return x(d[0])+x.rangeBand()/2; })
        .attr("y", function(d) { return y(d[1])-5; })
        .attr("text-anchor", "middle")
        .attr("transform",  "rotate(-90,0,0)" ); 

如上所述更改最后一行。