D3.js Диаграмма Санки: Добавить заголовок (текст) над каждым столбцом узлов

Question

Я хочу добавить заголовки над каждым столбцом узлов на диаграмме Санки D3.js. Например, я беру этот пример: http://bl.ocks.org/d3noob/5028304, и это результат, который я хочу:

График Санки

Я думал, что-то вроде этого, но это не убеждает меня. Я ищу другие альтернативы.

        var columnNames=["step 1","step 2","step 3","step 4"];
        var distance=width/(columnNames.length-1);
        var pos=0;
        
        for (var i = 0; i < columnNames.length; i++){
            svg.append("text")
              .attr("x", pos)
              .text(columnNames[i]); 

            pos=pos+distance;
        }

Как я могу это сделать?

Заранее спасибо.

Answer 1

Когда генерируется sankey, каждому узлу в вашем sankey присваивается значение dx, которое связывает его положение слева. Если вы выполните итерацию по своим узлам (graph.nodes) и создадите массив, содержащий уникальные значения dx, вы будете знать, сколько существует шагов, и координату x метки шага.

Этот массив может использоваться как объединение данных для создания меток, а затем текст может быть создан с использованием значения, например label.text (function (d) {return "step" + d;})