Удалить концевые клещи с оси D3.js

Я использую (отличный) D3.js для генерации некоторых графиков, и я не могу найти способ удалить концевые тики по оси x и y.

Возьмем, например, ось y.

Когда значение конечного тика совпадает с меткой, я в порядке с ним.

Но когда последний круглый ярлык находится ниже конца графика, я получаю два тика, один для последней закругленной метки и один над ним в конце оси y.

Я не хочу, чтобы этот конечный тик был видимым, потому что я обнаружил, что он меньше, чем обычный инвертированный между ярлыками, отвлекающими.

См. здесь пример того, что я описываю:

http://www.road2stat.com/cn/wp-content/attachments/2012/04/d3_interactive.png

Любые советы?

P.S В качестве ответа, я мог бы установить галочки явно. Но мне нравится удобство скрытых тиков, просто не хочу, чтобы немаркированные клещи загрязняли ось. Таким образом, идеальное решение (если оно существует) также будет принимать во внимание.

Ответ 1

Функции axis.tick* могут вам помочь. У вас есть несколько возможностей предотвратить поведение, которое вы описываете. Вы можете установить тики явно с помощью функции tickValues(). Или вы можете установить размер конечных тиков на 0, используя tickSize(). Вы также можете управлять базовой шкалой с помощью функции ticks().

В зависимости от вашего конкретного сценария один из этих вариантов может иметь больше смысла, чем другие.

Ответ 2

Для тех, кто попал на этот вопрос, потому что все, что вы хотите сделать, это удалить два концевых тика с оси, это сделает трюк:

.outerTickSize(0)

Добавьте это к любому вызову любой оси, например:

d3.svg.axis().outerTickSize(0)

Ответ 3

Если вы хотите просто скрыть ограничивающие значения и сохранить неявное поведение в середине, вы можете изменить объект SVG оси сразу после его отрисовки.

Скажем, здесь вы рисуете/обновляете свою ось:

g.selectAll(".x.axis").call(xAxis);

Теперь g будет содержать .tick объекты .tick. каждый из них будет относиться к одному значению тика. Вы можете выбрать их и установить атрибут видимости:

d3.select(g.selectAll(".tick")[0][0]).attr("visibility","hidden");

В качестве альтернативы вы можете обратиться к любому конкретному тику по его значению d или индексу i

g.selectAll(".tick")
    .each(function (d, i) {
        if ( d == 0 ) {
            this.remove();
        }
    });

Будьте осторожны с .remove(). Иногда первое значение уже удалено, и оно удаляет второе значение при обновлении. Видимость скрытой является более надежной.

кредит Ян и Денис в d3-js группе Google https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME

Ответ 4

В d3.js v4.x используйте .tickSizeOuter(0), например

self._leftAxis = d3.axisLeft(self._y)
      .tickSizeInner(3) // the inner ticks will be of size 3
      .tickSizeOuter(0); // the outer ones of 0 size

Обратите внимание, что нулевой тик ниже считается innger на

Этот d3.js v4 doc: https://github.com/d3/d3-axis

Ответ 5

Удалите концевые тики, используя что-то вроде этого: note tickSize (внутренний, внешний)

var xAxis = d3.svg.axis().scale(x).
                tickSize(3, 0).orient("bottom").tickFormat( ... );

Если вы поместите внешний параметр в 0 в tickSize (внутренний, внешний), вы не получите внешние тики.

Ответ 6

Я не уверен, что внешний размер галочки имеет отношение к первому или последнему тику оси.

tickSize фактически контролирует длину элемента <line> внутри группы тиков. Поэтому он имеет дело с расстоянием между элементом <text> галочки и осью или длиной вспомогательных линий, начиная с позиций тика, которая зависит от ориентации оси и где она была перемещен в (через css translate()).

Вот как выглядит группа тиков:

<g transform="translate(10,0)" style="opacity: 1;" class="tick">
   <line x2="0" y2="-15"></line>
   <text x="0" y="-18" style="text-anchor: middle;" dy="0em">0.0</text>
</g>

Теперь вы можете управлять атрибутами x2 и y2 элемента <line> с помощью метода tickSize. Здесь я использую tickSize(15, 0) и orientation('top') для оси x, которая была перемещена в нижней части диаграммы. Таким образом, таблицы тиков проецируются на график довольно грязным способом.

Ответ 7

Рабочий раствор для D3 v5.9.2:

После того как вы объявили yAxis и задали атрибуты, оберните его в g и вызовите его:
```
svg.append("g").attr("id", "yAxisG").call(yAxis);
```
Удалите первый элемент <path> из группы осей:
```
d3.select("g#yAxisG").select("path").remove();
```

Ответ 8

Просто удалите обе оси:

d3.selectAll('.axis').remove();