Квадратный график с двойным измерением и двойной осью X с использованием d c. js

Question

Можно ли с помощью d c. js нарисовать две оси X графика, т.е. одна находится ниже, а другая - выше. Один размер / ось x содержит ab, а над осью x содержится 1 (ab с под осью a) 2 (ab с под осью x). IMG прилагается, чтобы объяснить вид. Если возможно, дайте несколько советов.

С уважением.

Answer 1

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

Предположим, у нас есть домен (['1A', '1B', '2A, '2B', ...]) в переменной с именем domain.

Мы можем добавить pretransition обработчик , который выводит aws строк после каждого второго блока:

function x_after(chart, n) {
  return (chart.x()(domain[n]) + chart.x()(domain[n+1])) / 2 + chart.margins().left + 7; // why 7?
}

chart.on('pretransition', chart => {
  let divide = chart.g().selectAll('line.divide').data(d3.range(domain.length/2));
  divide.exit().remove();
  divide = divide.enter()
    .append('line')
    .attr('class', 'divide')
    .attr('stroke', 'black')
    .merge(divide);
  divide
    .attr('x1', n => x_after(chart, n*2 + 1))
    .attr('x2', n => x_after(chart, n*2 + 1))
    .attr('y1', chart.margins().top)
    .attr('y2', chart.margins().top + chart.effectiveHeight())
})

При этом используется шаблон общего обновления D3 для добавления вертикальной линии после каждого другого блока (в частности, с нечетным индексным номером).

Требуется среднее значение положения X 1B и 2A, 2B и 3A и т. Д. c. Я понятия не имею, почему мне пришлось добавить 7, поэтому, возможно, я что-то упускаю.

демо-скрипка .