Добрый день! Создаю стандартные оси 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);
Комментариев нет:
Отправить комментарий