d3. js, цветовой градиент не меняется - PullRequest
Новая
       36

d3. js, цветовой градиент не меняется

0 голосов
/ 04 августа 2020

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

При добавлении другого экземпляра компонента цвет градиента остается неизменным даже при изменении Input() colorList. Возможно, чего-то не хватает?

Пример кода здесь: https://stackblitz.com/edit/spectrum-scale-component

enter image description here


//colorList = ['#9E0142', '#D53E4F','#090979']

<app-spectrum-scale
[data]="0.7"
[leftLabel]="'Feminine'"
[rightLabel]="'Masculine'"
[middleLabel]="'Neutral'"
[minVal]="-1"
[maxVal]="1"
[colorList]="['#9E0142', '#D53E4F','#090979']"
>
</app-spectrum-scale>  

//colorList = "['#9E0142', '#D53E4F',
                    '#F46D43', '#FDAE61',
                    '#FEE08B', '#FFFFBF',
                    '#E6F598', '#ABDDA4', 
                    '#66C2A5', '#6AA84F',
                    '#38761D']"

<app-spectrum-scale
[data]="0.55"
[leftLabel]="'Negative'"
[rightLabel]="'Positive'"
[middleLabel]="'Neutral'"
[minVal]="-1"
[maxVal]="1"
[colorList]="['#9E0142', '#D53E4F',
                    '#F46D43', '#FDAE61',
                    '#FEE08B', '#FFFFBF',
                    '#E6F598', '#ABDDA4', 
                    '#66C2A5', '#6AA84F',
                    '#38761D']"
>
</app-spectrum-scale>

1 Ответ

0 голосов
/ 08 августа 2020

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

рабочий код здесь: https://stackblitz.com/edit/spectrum-scale-component

this._id ='id' + (new Date()).getTime();

вы можете затем назначить этот tempId для Атрибут заливки rect 

var tempColorList = this.colorList
var tempId = this._id;

var grad = this._chart.append('defs')
  .append('linearGradient')
  .attr('id', tempId)
  .attr('x1', '0%')
  .attr('x2', '100%')
  .attr('y1', '0%')
  .attr('y2', '0%');

grad.selectAll('stop')
  .data(tempColorList)
  .enter()
  .append('stop')
  .style('stop-color', function(d){ return d; })
  .attr('offset', function(d,i){
    return 100 * (i / (tempColorList.length - 1)) + '%';
  })

var gradValue = 'url(#' + tempId + ')'

var spectrum_bar = this._chart.append('rect')
  .attr('class', 'bg-rect')
  .attr('rx', 5)
  .attr('ry', 5)
  .style('opacity', 0.5)

// assign gradValue id here

  .style('fill', gradValue)
  .attr('height', 15)
  .attr('width', this._barWidth)
  .attr('x', 0)
...