Как использовать градиенты SVG для отображения разных цветов в зависимости от размера цветной области

Я использую SVG и D3 для создания гистограмм, и у меня есть вопрос, как их раскрасить. Я искал много вопросов на этом и других сайтах и ​​еще не нашел никого с такой же проблемой.

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

Я смог написать функцию для создания для полосы любой заданной высоты уникального линейного градиента, который окрашивал полосы в желаемый цвет.

Однако, поскольку этот график является динамическим и высота столбцов может меняться много раз в секунду по мере обновления данных, создание и применение нового градиента каждый раз и для каждого столбца определенно неэффективно и может привести к серьезным задержкам при обновлении данных. бары. (Я признаю, что на самом деле я не пробовал это ни с чем, кроме статического тестового примера, поэтому я могу ошибаться в этом последнем предположении.)

Использование статического градиента, конечно, дает что-то вроде этого, где цвета смешиваются в соответствии с высотой полосы, а не высотой области:

Использование статического градиента

Однако в моем желаемом сценарии меньшие полосы должны иметь очень мало красного или темно-синего цвета соответственно.

Наконец, мой вопрос заключается в следующем: есть ли способ

  1. создать один градиент, который применяется к самой области SVG (просто)
  2. сказали, что градиент как-то замаскирован (просто)
  3. затем выборочно разоблачены под прямоугольниками, представляющими столбцы графика? (???)

Или есть какая-то другая техника, которую я пропускаю?

Спасибо


svg d3.js linear-gradients
person SwimsZoots    schedule 10.10.2012    source источник
comment
В простом SVG вы можете указать, растягивается ли система координат градиента, чтобы заполнить форму. Я не знаю D3, поэтому я не знаю, доступен ли он и каким образом.   -  person Kevin Reid    schedule 11.10.2012

Ответы (1)


arrow_upward
16
arrow_downward

Это просто реализовать, но немного сложно понять, вам нужно указать, что единицами градиента являются userSpaceOnUse, а затем определить область, где вы хотите применить его, через x1, x2, y1, y2:

var gradient = svg
    .append("linearGradient")
    .attr("y1", minY)
    .attr("y2", maxY)
    .attr("x1", "0")
    .attr("x2", "0")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")

gradient
    .append("stop")
    .attr("offset", "0")
    .attr("stop-color", "#ff0")

gradient
    .append("stop")
    .attr("offset", "0.5")
    .attr("stop-color", "#f00")

Демонстрацию можно посмотреть здесь: http://jsfiddle.net/ZCwrx/.

person methodofaction    schedule 11.10.2012
comment
Идеальный! Именно то, что мне нужно. - person SwimsZoots; 11.10.2012