D3 пользовательская текстовая ось метки

Question

Я пытаюсь настроить ось x на диаграмме d3; Я хочу добавить две метки: «слева» и «справа» на обоих концах.

Я попытался это, но он не работает:

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

Вы знаете, как это сделать?

Answer 1

axis.tickFormat как следует из названия определяет метку для каждого из клещи, если вы хотите добавить новые метки на обоих концах вам нужно добавить их по своему усмотрению:

Предполагая, что у вас есть ссылка на корень ГСВ в вар 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);