D3.js изменить стиль линии пути оси x

Question

D3.js изменить стиль линии пути оси x

В d3.на диаграммах js линия оси x (черная линия между столбиками и метками столбиков) выглядит примерно так по умолчанию: |----------------|, смотрите скриншот ниже:

Обратите внимание на двойную линию в Розовом поле. Очень некрасиво.

Как бы я изменил это на просто прямую линию (без вертикальных линий на обоих концах)?

Глядя на сгенерированный SVG, этот код, кажется, определяет этот стиль: <path class="domain" d="M0,6V0H824V6"></path>, который автоматически генерируется D3.

Спасибо!

501 2

svg

2 ответов:

Comments

Ничего не найдено.

Lars Kotthoff · Accepted Answer · 2015-05-29 20:49:15

Это контролируется axis.outerTickSize():

Внешний размер тика 0 подавляет квадратные концы пути домена, вместо этого создавая прямую линию.

Все, что вам нужно сделать, это установить axis.outerTickSize(0).

atomocopter · Accepted Answer · 2016-09-17 01:48:21

Ответ Ларса Коттоффа все еще действителен для версий d3, предшествующих 4.x, с версией 4 он изменился на axis.tickSizeOuter(). Обратите внимание, что tickSize() также изменяет внешние тики, что означает, что порядок вызова tickSize() и tickSizeOuter() важен.
d3.axisBottom(xScale)
    .tickValues(series)
    .tickSize(5)
    .tickSizeOuter(0)
);