Блог

Большинство библиотек обеспечивают ограниченную настройку диаграммы Сэнки (например, цвет узла, ширина, заполнение).

Диаграмма Сэнки по умолчанию (d3):

Но что, если мне нужно изменить высоту узлов и расположить узлы по вертикали? Как я могу это сделать?

Мои требования:

Кто-нибудь может мне помочь?

Немного банально, но вы можете переопределить правила CSS, чтобы стилизовать элементы так, как вы хотите.

Например, если у меня есть сгенерированная d3 диаграмма Сэнки в div с именем «сэнки», я могу добавить эти правила CSS, чтобы изменить элементы rect на красный, а элементы пути, которые образуют ссылки, на синий.

После очень краткого тестирования элементы rect, похоже, требуют модификатора CSS «!важно», поэтому комментарий об этом кажется немного банальным:

 #sankey > svg > g > g > g > rect {
    fill: red !important;
}

#sankey > svg > g > g > path {
    stroke: blue;
    stroke-opacity: 0.7;
}
 

Чтобы сделать прямоугольники больше, вы могли бы установить цвет их штриха таким же, как и заливка, и установить ширину штриха на что-то большее, а затем поиграть с параметром «nodePadding» в API d3.

Я прикрепил скриншот того, что я должен сделать, играя с этими:

Без просмотра вашего кода — это игра в угадайку. Итак, я полагаю, вы использовали примеры сэнки D3.js в Интернете, которые в значительной степени используют один и тот же код. В какой-то момент вы могли бы увидеть что-то вроде этого:

 var sankey = d3.sankey()
    .nodeWidth(12)
    .nodePadding(12)
    .size([width, height]);
 

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