使用d3格式在刻度前插入空格

时间:2013-11-22 15:14:20

标签: svg d3.js

为什么在刻度文本之前没有插入空格?

d3.format(' >10')

我也尝试过非破坏空格,但是没有用。

1 个答案:

答案 0 :(得分:2)

以下是评论中提出的两个解决方案:http://jsfiddle.net/5Rm2s/1/

<svg height="100px" width="100px">
    <text x="10" y="25"> Text</text>
    <text x="10" y="50" xml:space="preserve"> Text</text>
    <text x="10" y="75" dx="1em">Text</text>
    <line x1="10" y1="10" x2="10" y2="90" stroke="red"></line>
</svg>

在D3中:

svg.append('g')
   .classed('no-space', true)
   .attr('transform', 'translate(' + 25 + ',' + 10 + ')')
   .call(xAxis);

svg.append('g')
   .attr('with-space-preserve', true)
   .attr('transform', 'translate(' + 25 + ',' + 60 + ')')
   .call(xAxis)
   .selectAll('text')
   .attr('xml:space', 'preserve');

svg.append('g')
   .attr('with-em', true)
   .attr('transform', 'translate(' + 25 + ',' + 110 + ')')
   .call(xAxis)
   .selectAll('text')
   .attr('dx', '1em');