D3 - X Осевые метки перекрываются

Я создаю линейную диаграмму с использованием D3 v4, а метки X перекрываются.D3 - X Осевые метки перекрываются

// Add the X Axis 
var xAxis = svg.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(d3.axisBottom(x) 
.tickValues(data.map(d=>d.date)) 
.tickFormat(d3.timeFormat("%d/%m %H:%M"))) 
.selectAll("text") 
.attr("transform", "rotate(90)") 
.attr("dy", ".35em") 
.attr("y", 0) 
.attr("x", 9) 
.style("text-anchor", "start");

Полный код здесь: JSFiddle

источник

2017-02-10 Rodrigo Faria

Найдите перекрывающиеся метки, а затем переместите их. [Поиск совпадающих меток] (https://jsfiddle.net/tsjnzey2/6/). – Bhavik

Привет @Bhavik! Я использую ваш пример, чтобы попробовать обновить метки, используя это: rect1.right = rect2.left; Но не работает! –

В самом деле @Bhavik, я бы хотел создать линейную диаграмму на D3 следующим образом: https://dl.dropboxusercontent.com/u/55643259/line_chart_excel.jpg –

Не используйте данные значения клеща. Точки данных вблизи правого конца диаграммы слишком близки друг к другу для этого. Просто удалите эту строку

.tickValues(data.map(d=>d.date))

Покажите точное время в всплывающей подсказке, если они важны.

источник

2017-02-10 19:57:31

Спасибо за ответ @ tormi-reinson! Но я не могу удалить эту строку, потому что хочу нарисовать только метки, содержащие данные. Если я удалю эту строку, другие значения, которые не находятся в массиве данных, будут напечатаны на оси X. –

D3 - X Осевые метки перекрываются

ответ

Смежные вопросы