javascript - D3从最右边的字符在轴的左侧对齐文本

所以我有一个D3条形图，看起来像：bar chart。当数据条在轴的右侧重叠时，问题就出现了。我想把数据文本沿着图轴的左边对齐（如用更大的数字所示），而不管条是多么小。var data = [200.000001,3.00001,300.00001,1.00001,400.00001,5.0001,100.00001,20.0001,40.0001,50.00001, 2.00001];//bar chartvar bars = d3.select("#chart").append("div").attr("class","chartstyle");var b = bars.selectAll("div") .data(data) .enter().append("div") .style("width", function(d) { return d + "px"; }) .text(function(d) { return d; });});//from stylesheet<style>.chartstyle div { font: 10px; background-color: red; text-align: right; padding: 0px; margin: 0px; color: black;}</style> 最佳答案 您最好使用具有属性设置为 >（ >）的元素，而不是混合来自不同名称空间的节点。var gBars = d3.select("#chart") .selectAll(".bar-container") .data(data) .enter().append("g") .attr("class", "bar-container");// barsgbars.append("rect") .attr("class", "bar") [...] // bars positioning and sizing logic// labelsgBars.append("text") .attr("class", "bar-label") .attr("text-anchor", "end") [...] // same positioning logic .text(Object);