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

#javascript #svg #d3js

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




  



  






    

Ответы

Ответ 1

Нашел такое решение. Добавляем метод 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);


  



Ответ 2

Может SVG попробовать?