Мобильная версияЯ пытаюсь создать кольцевую визуализацию, используя d3 с эффектом затухания/градиента для каждой дуги, вот так:
Я пытался добавить «filter: drop-shadow(0 0 10px color)», но он не дал такого эффекта, к тому же он распространяется на обе стороны.
Поэтому я перешёл на два пирога
[*]Внешний сплошной цвет. [*]Внутренний с (надеюсь) эффектом затухания.
Я знаю, что с помощью градиента я могу сделать сплошное изображение, а затем затемнить его, но поскольку у меня нет четкого пути к успеху, я разделил его на две части
Я пытался использовать как линейный, так и радиальный градиент на второй диаграмме, что кажется шагом в правильном направлении, но эффект градиента меняется из-за разных углов дуг:
Для простоты сейчас я создал градиентный фильтр только для одного цвета, так как не уверен, что это решение моей проблемы...
Я добавил фрагмент, чтобы помочь помощникам
const flowers = ['красный','зеленый','фиолетовый','синий','оранжевый','бирюзовый'] константные данные = [10,12,33,112,22,4]; const pie = d3.pie().padAngle(0.03); константные дуги = пирог (данные); const svg = d3.select('body') .append('SVG'); const svgDefs = svg.append('defs'); const mainGradient = svgDefs.append('radialGradient') .attr('id', 'mainGradient'); mainGradient.append('стоп') .attr('стоп-цвет', 'красный') .attr('смещение', '10%'); mainGradient.append('стоп') .attr('стоп-цвет', 'розовый') .attr('смещение', '90%'); d3.select('тело') .style('позиция', 'относительно') .append('svg') .style('позиция', 'абсолют') .style('z-индекс', 10) .attr('ширина', 600) .attr('высота', 600) .append("г") .attr("трансформировать", "перевести(100,100)") .selectAll('путь') .data(дуги) .входить() .append('путь') .attr('d', (a,b,c) => d3.arc()({...a, внутреннийРадиус: 96, ВнешнийРадиус: 100})) .style('fill', (d, index) => цвета[индекс]) svg.style('позиция', 'абсолютный') .attr('ширина', 600) .attr('высота', 600) .append("г") .attr("трансформировать", "перевести(100,100)") .selectAll('путь') .data(дуги) .входить() .append('путь') .переход() .attr('d', (a,b,c) => d3.arc()({...a, внутреннийРадиус: 0, ВнешнийРадиус: 96})) .style('fill', 'url(#mainGradient)')
