Отображать ось y в процентах?

Я делаю диаграмму, и я хочу, чтобы метки ярлыков оси y отображались как проценты (вместо десятичных знаков). Как я могу это сделать?

Мой текущий код выглядит примерно так:

yAxis
  .append("text")
  .attr("class", "ticklabel")
  .attr("x", 0)
  .attr("y", y)
  .attr("dy", ".5em")
  .attr("text-anchor", "middle")
  .text(y.tickFormat(5))
  .attr("font-size", "10px")

Я заметил, что d3 имеет спецификатор формата , но я не уверен, как использовать их в сочетании с tickFormat.

Ответ 1

Похоже, вы создаете ось вручную. Вместо этого я рекомендую использовать компонент d3.svg.axis, который выполняет рендеринг для вас. Например:

http://bl.ocks.org/1166403

Если вы хотите форматировать тики в процентах, используйте директиву d3.format%:

var formatPercent = d3.format(".0%");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

Вместо этого вы можете использовать директиву p, если хотите округлить до процента до значащих цифр.

Чтобы более точно ответить на ваш вопрос, вы используете d3.format вместо шкалы tickFormat. Масштабы предоставляют по умолчанию tickFormat для удобства, но если вы хотите различного поведения, то вы используете собственный d3.format, а не стандартный по умолчанию масштаб.