Я использую SVG и D3 для создания гистограмм, и у меня есть вопрос, как их раскрасить. Я искал много вопросов на этом и других сайтах и еще не нашел никого с такой же проблемой.
Я хотел бы, чтобы каждая полоса начиналась снизу с одного цвета (например, желтого) и, по мере того, как полоса становится выше, постепенно добавляла больше второго цвета (например, красного), чтобы полосы были максимально потенциальными. высота будет только вторым цветом. В этом примере вершины столбцов, составляющие половину их потенциальной высоты, будут оранжевыми.
Я смог написать функцию для создания для полосы любой заданной высоты уникального линейного градиента, который окрашивал полосы в желаемый цвет.
Однако, поскольку этот график является динамическим и высота столбцов может меняться много раз в секунду по мере обновления данных, создание и применение нового градиента каждый раз и для каждого столбца определенно неэффективно и может привести к серьезным задержкам при обновлении данных. бары. (Я признаю, что на самом деле я не пробовал это ни с чем, кроме статического тестового примера, поэтому я могу ошибаться в этом последнем предположении.)
Использование статического градиента, конечно, дает что-то вроде этого, где цвета смешиваются в соответствии с высотой полосы, а не высотой области:
Однако в моем желаемом сценарии меньшие полосы должны иметь очень мало красного или темно-синего цвета соответственно.
Наконец, мой вопрос заключается в следующем: есть ли способ
- создать один градиент, который применяется к самой области SVG (просто)
- сказали, что градиент как-то замаскирован (просто)
- затем выборочно разоблачены под прямоугольниками, представляющими столбцы графика? (???)
Или есть какая-то другая техника, которую я пропускаю?
Спасибо