Question

我有一个带标签的多条形图，但它看起来不太好，因为标签是堆叠的，我把代码放在这个jsfiddle

我使用的代码部分是：

state.selectAll("text.state")
                    .data(function(d) {
                        return d.quantities;
                    })
                    .enter()
                    .append("text")
                    .attr("x", function(d) {
                        return x1(d.name) + 2;
                    })
                    .attr("y", function(d) {
                        return y(d.value);
                    })
                    .style("fill", "#000000")
                    .attr("font-size", 10)
                    .attr("font-weight", 700)
                    .text(function(d) {
                        return d.value;
                    });

我尝试将标签放在垂直形式，我使用.attr('transform', 'rotate(-90)');

但看起来堆积

我希望你能帮我解决这个问题

谢谢！

Answer 1

这是小提琴：https://jsfiddle.net/yocxuxn9/2/

我刚刚使用了transform，translate，rotate属性，而不是x和y值

 state.selectAll("text.state")
                    .data(function(d) {
                        return d.quantities;
                    })
                    .enter()
                    .append("text")
                    .attr("transform", function(d) { 
                      return "translate(" + x1(d.name) + ","+y(d.value)+")rotate(90)"; 
                    })
                    .style("fill", "#000000")
                    .attr("font-size", 10)
                    .attr("font-weight", 700)
                    .text(function(d) {
                        return d.value;
                    });

d3.js中的标签问题

1 个答案: