Градиент отображается только в 2 цветах в d3.js - PullRequest
Новая
       48

Градиент отображается только в 2 цветах в d3.js

0 голосов
/ 22 октября 2019

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

Маленькие линии с градиентами

На этом рисунке линии шире, чем длинные, нокруглая крышка облегчает просмотр линии

Мой код для секций линии, помещает каждую строку в (0,10), чтобы закрасить их градиентом, а затем переводит их в правильное положение и угол: 

this.strokeFilter.append('line')
    // position that is colored by the gradient
    .attr('x1', 0)
    .attr('y1', 10)
    .attr('x2', lineLength)
    .attr('y2', 10.000001) // if close to y1 some error occur

    // The look of the line
    .attr('stroke', `url(#linear-gradient90green)`)
    .attr('stroke-linecap', 'round')
    .attr('stroke-width', 20)

    // rotate and translate to position       
    .attr('transform', `translate(${prePoint.x}, ${prePoint.y}) rotate(${lineAngle}) translate(0, 0)`)

Мой код для зеленого градиента: 

// set color range purple to green
var colorRangeGreen = ['#3b085c', '#9f0055', '#da402e', '#df9800', '#a8eb12'];
var colorGreen = d3.scaleLinear().range(colorRangeGreen).domain([1, 2, 3, 4, 5]);
// create gradient     
var linearGradient90green = svg.append("defs").append("linearGradient")
    .attr("id", "linear-gradient90green")
    .attr("gradientTransform", "rotate(90)")
    .attr('gradientUnits', 'objectBoundingBox');
linearGradient90green.append("stop").attr("offset", "0%").attr("stop-color", colorGreen(1));
linearGradient90green.append("stop").attr("offset", "25%").attr("stop-color", colorGreen(2));
linearGradient90green.append("stop").attr("offset", "50%").attr("stop-color", colorGreen(3));
linearGradient90green.append("stop").attr("offset", "75%").attr("stop-color", colorGreen(4));
linearGradient90green.append("stop").attr("offset", "100%").attr("stop-color", colorGreen(5));

Итак, просто напомним, вопрос и проблема: почему отрезки линий отображают только 2 цвета?

...