Страницы

Поиск по вопросам

вторник, 5 марта 2019 г.

Как сделать пересекающиеся оси на d3.js?

Добрый день! Создаю стандартные оси OX, OY. Все замечательно, но нулевая точка обозначается по каждой из осей, причем текст пересекается самой осью. Есть ли хорошие способы либо в принципе убрать одну из засечек, либо передвинуть текст? (использую 4-ую версию библиотеки) Изменения в 4-ой версии
Документация
var xScale = d3.scaleLinear() .domain([-2, 2]) .range([-200, 200]); var yScale = d3.scaleLinear() .domain([-2, 2]) .range([200, -200]); var xAxis = d3.axisBottom() .scale(xScale) .ticks(8); var yAxis = d3.axisLeft() .scale(yScale) .ticks(8); d3.select("svg").append("g") .attr("transform", "translate(" + 250 + "," + 250 + ")") .call(xAxis); d3.select("svg").append("g") .attr("transform", "translate(" + 250 + "," + 250 + ")") .call(yAxis);


Ответ

Нашел такое решение. Добавляем метод tickFormat для осей. И далее в функции, если значение равно нулю, меняем на null. Остальные без изменений. При этом нули исчезают. В принцип можно пойти дальше и как-то нарисовать ноль рядом с пересечением, но меня и так устраивает уже.
var xScale = d3.scaleLinear() .domain([-2, 2]) .range([-200, 200]); var yScale = d3.scaleLinear() .domain([-2, 2]) .range([200, -200]); var xAxis = d3.axisBottom() .scale(xScale) .tickFormat(function(d) { if (d == 0) { return null } else { return d } }); var yAxis = d3.axisLeft() .scale(yScale) .tickFormat(function(d) { if (d == 0) { return null } else { return d } }); d3.select("svg").append("g") .attr("transform", "translate(" + 250 + "," + 250 + ")") .call(xAxis); d3.select("svg").append("g") .attr("transform", "translate(" + 250 + "," + 250 + ")") .call(yAxis);

Комментариев нет:

Отправить комментарий