D3 Цветовой градиент относительно оси - PullRequest
Новая
       34

D3 Цветовой градиент относительно оси

0 голосов
/ 26 июня 2019

Current line chart implementation

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

Проблема в том, что я хочу, чтобы градиент цвета был относительно оси x, чтобы любой сегмент, пересекающий 0 на оси x, был красным, если линия меньше 0, и зеленым, если линия больше 0В данный момент каждый сегмент упакован, и распределение градиента применяется индивидуально к каждому сегменту, а не относительно оси.Как я могу заставить линейный градиент вести себя желаемым образом?

var linearGradient = svg.append("defs")
      .append("linearGradient")
      .attr("id", "linear-gradient");

    linearGradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#d7191c");

    linearGradient.append("stop")
      .attr("offset", "50%")
      .attr("stop-color", "#ff8080");

    linearGradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#1a9641");

var randomnumner = Math.floor(Math.random() * 10) + 1;
          payer.selectAll("link")
          .data(function(d){return d.values})
          .enter()
          .append('path')
          .attr("d", function(d) {return curvedline(d); })
          .style("stroke", function(d) { if((d.prev_x>0 && d.percent_change<0) || (d.prev_x<0 && d.percent_change>0)) {
                return 'url(#linear-gradient)';
              } else { 
                return '#cccccc';
              } 
            })
          .attr("fill", "none")
          .attr("stroke-width", function(d) {return d.payer_volume});
...