Question

我正在尝试在d3图表上自定义我的x轴;我想在它的两端添加两个标签，“左”和“右”。

我试过这个，但它不起作用：

var xlabels = ["Left", "Right"]
var xAxis = d3.svg.axis()
            .scale(xScale)
            .tickValues(xScale.domain())    
            .orient("bottom")
            .ticks(2)
            .tickFormat(xlabels)
            ;

你知道怎么做吗？

Answer 1

axis.tickFormat顾名思义定义每个标记的标签，如果你想在两端添加新标签，你需要自己添加标签：

假设您在var svg

中引用了根svg

svg.append('text')
  .attr('text-anchor', 'start')
  .attr('y', function () {
    // y position of the left label
    // typically a value less than the height of the svg
  })
  .attr('x', function () {
    // x position of the left label
    // typically a value near to 0
  })
  .text('Left')

svg.append('text')
  .attr('text-anchor', 'end')
  .attr('y', function () {
    // y position of the right label
    // typically a value less than the height of the svg
  })
  .attr('x', function () {
    // x position of the right label
    // typically a value near the width of the svg
  })
  .text('Right')

另请查看http://bl.ocks.org/mbostock/1166403，这些行定义了您需要的标签：

svg.append("text")
  .attr("x", width - 6)
  .attr("y", height - 6)
  .style("text-anchor", "end")
  .text(values[0].symbol);

D3自定义文本标签轴

1 个答案: