маркування осі d3

Як додати текстові мітки до осей у d3?

Наприклад, у мене є простий лінійний графік з осями x та y.

На моїй осі х є галочки від 1 до 10. Я хочу, щоб під нею з’явилося слово "дні", щоб люди знали, що вісь х підраховує дні.

Подібно до цього на осі y у мене є цифри 1-10 як кліщі, і я хочу, щоб слова "з'їдені бутерброди" з'являлися збоку.

Чи є простий спосіб це зробити?

Мітки осей не вбудовані в компонент осі D3 , але ви можете додати мітки самостійно, просто додавши textелемент SVG . Хорошим прикладом цього є моє відтворення анімованої бульбашкової діаграми Гапміндера "Багатство та здоров'я народів" . Мітка осі х виглядає так:

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

І мітка осі Y ось така:

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

Ви також можете використовувати таблицю стилів для стилювання цих міток як завгодно, разом ( .label) або окремо ( .x.label, .y.label).

У новій версії D3js (версія 3 роки), при створенні осі діаграми з допомогою d3.svg.axis()функції ви доступ до двох методів називаються tickValuesі tickFormatякі вбудовані всередині функції , так що ви можете визначаєш , які цінності ви потрібні тики для і в якому формат, у якому ви хочете, щоб текст відображався:

var formatAxis = d3.format("  0");
var axis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatAxis)
        .ticks(3)
        .tickValues([100, 200, 300]) //specify an array here for values
        .orient("bottom");

Якщо вам потрібна мітка осі y в середині осі y, як я це зробив:

1. Поверніть текст на 90 градусів із закріпленням тексту в середині
2. Перекладіть текст до середньої точки
   • x позиція: для запобігання перекриванню міток галочок осі y ( -50)
   • Позиція y: відповідати середній точці осі y ( chartHeight / 2)

Зразок коду:

var axisLabelX = -50;
var axisLabelY = chartHeight / 2;

chartArea
    .append('g')
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('transform', 'rotate(-90)')
    .text('Y Axis Label')
    ;

Це запобігає обертанню всієї системи координат, як згадувалося вище у lubar.

Якщо ви працюєте в d3.v4, як запропоновано, ви можете використовувати цей екземпляр, пропонуючи все необхідне.

Можливо, ви просто захочете замінити дані осі X своїми "днями", але не забувайте правильно аналізувати значення рядків і не застосовувати конкатенати.

parseTime також міг би зробити фокус на масштабування днів за допомогою формату дати?

d3.json("data.json", function(error, data) {
if (error) throw error;

data.forEach(function(d) {
  d.year = parseTime(d.year);
  d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));


g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("fill", "#5D6971")
    .text("Population)");

скрипка з глобальним css / js

D3 забезпечує досить низький рівень компонентів, які ви можете використовувати для складання діаграм. Вам надаються будівельні блоки, компонент осі, об’єднання даних, виділення та SVG. Ваша робота скласти їх разом, щоб скласти діаграму!

Якщо вам потрібна звичайна діаграма, тобто пара осей, мітки осей, заголовок діаграми та ділянка ділянки, чому б не поглянути на d3fc ? це набір з відкритим вихідним кодом з високоякісних компонентів D3. Він включає декартову складову діаграми, яка може бути вам потрібною:

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xLabel('Value')
  .yLabel('Sine / Cosine')
  .chartLabel('Sine and Cosine')
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

// render
d3.select('#sine')
  .datum(data)
  .call(chart);

Ви можете побачити більш повний приклад тут: https://d3fc.io/examples/simple/index.html

chart.xAxis.axisLabel('Label here');

або

xAxis: {
   axisLabel: 'Label here'
},