Как отметить текущее время на d3js графике?

Question

[tamtakoe]

На графике по оси X отображается время, которое может уходить в будущее. Вертикальной чертой нужно отметить настоящий момент. Эту черту правильно рисовать как отдельный график или она должна быть частью оси?

Answer 1

[Владимир]

Если нужно изменить форматирование определенного(ых) тиков
можешь выбрать при помощи .select и при помощи .attr('class', (d) => {}) проставить класс определенным тикам
Вот приблизительный пример но на старом d3

const yAxis = d3.svg
							.axis()
							.scale(y)
							.tickValues(yTickValues)
							.tickFormat(axisData.ticFormat)
							.tickSize(tickSize)
							.orient(orient);
						const yAxisLReady = svg
							.append('g')
							.attr('class', 'y axis')
							.attr('transform', 'translate(' + translateX + ',' + translateY + ')')
							.call(yAxis);

						yAxisLReady.selectAll('line').attr('class', d => { if (d.y === 25){ return 'new-class'}  });

Comments

[tamtakoe]

Да, работает такой способ. Правда, пришлось две оси одну на другую наложить

// X (date) axis
this.g.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3Axis.axisBottom(this.x).ticks(1, '').tickValues([now]).tickSize(-this.height))
      .select('.domain').remove(); // Remove the main bar of the axis

this.g.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3Axis.axisBottom(this.x));

[Владимир]

tamtakoe, Можно было тики генератором делать и помимо тиков через промежуток вставлять тик с текущем временем

[tamtakoe]

Владимир, А как это делается? Пока не очень понятно

[Владимир]

Красивого примера не нашел, лови какой есть

xTicsGenerator: function*(minDate, maxDate) {
						for (
							let x = 0, tickDate = moment(minDate).add(x, 'month');
							tickDate.isSameOrBefore(maxDate);
							x++, tickDate = moment(minDate).add(x, 'month')
						) {
							yield tickDate.toDate();
						}
					},

let xTickValues = [];
			for (let value of xTicsGenerator(minDate, maxDate)) {
				xTickValues.push(value);
			}
			thi