問題與標籤在d3.js

Question

我有標籤的多條圖，但它doesn't好看，因爲標籤堆疊，我把代碼在這個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; 
        });