Question

因此，我有一个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 chart
var 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>

Answer 1

最好将svg:text元素的text-anchor属性设置为end（see spec），而不要混合来自不同名称空间的节点。

var gBars = d3.select("#chart")
  .selectAll(".bar-container")
  .data(data)
  .enter().append("g")
    .attr("class", "bar-container");

// bars
gbars.append("rect")
  .attr("class", "bar")
  [...] // bars positioning and sizing logic

// labels
gBars.append("text")
  .attr("class", "bar-label")
  .attr("text-anchor", "end")
  [...] // same positioning logic
  .text(Object);

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

1 个答案: