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

Я хочу добавить заголовки над каждым столбцом узлов на диаграмме Санки 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;
        }

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

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


javascript d3.js sankey-diagram
person Edu    schedule 29.04.2018    source источник
comment
что ты уже испробовал?   -  person Ian    schedule 29.04.2018
comment
Я не уверен, как это сделать. Я обновил описание с тем, что я пробовал.   -  person Edu    schedule 30.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

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

person Tom Shanley    schedule 30.04.2018