D3.js — V7.0.0 – Draw a Chart with Gradient

D3.js is used in React to implement the curve and achieve gradient curves

const svg = d3.select('#line3').append('svg');
const path = svg.append('path');

/ / drawing
const list = [
  [15.50], [45.69], [75.40], [105.70], [135.30],
  [165.70], [195.30], [225.65], [255.55], [285.77],
  [315.58], [345.79]];const line = d3.line().curve(d3.curveCardinal);

const xAxisLabel = [
  '1 month'.'2 months'.'march'.'in April'.'may'.'June'.'July'.'August'.'September'.'October'.'November'.'12 months',];const x = d3.scalePoint()
  .domain(xAxisLabel)
  .range([15.345]);

svg.attr('width'.360).attr('height'.104)
  .attr('stroke'.'rgba(0, 0, 0, .25)')
  .attr('stroke-width'.0.5);
svg.append('g')
  .attr('transform'.'translate(0, 84)')
  .call(d3.axisBottom(x))
  .call(g= > g.select('.domain').remove())
  .call(g= > g.attr('transform'.'translate(0, 0)'))
  .call(g= >
    g.selectAll('line').attr('y2'.85)
      .style('color'.'rgba(0, 0, 0, .06)'))
  .call(g= >
    g.selectAll('text').attr('transform'.'translate(0, 80)')
      .style('color'.'rgba (0, 0, 0, 0.25)'));

// Curve gradient
const colorRange = [Color.errorColor(0), Color.errorColor(1.0)];
// @ts-ignore
const colorList = d3.scaleLinear().range(colorRange).domain([1.2]);

const linearGradient = svg.append('defs')
  .append('linearGradient')
  .attr('id'.'linear-gradient');

linearGradient.append('stop')
  .attr('offset'.'0%')
  .attr('stop-color', colorList(1));
// Another implementation
// .attr('stop-color', Color.error)
// .attr('stop-opacity', 0);

linearGradient.append('stop')
  .attr('offset'.'100%')
  .attr('stop-color', colorList(2));
// Another implementation
// .attr('stop-color', Color.error)
// .attr('stop-opacity', 1);

// @ts-ignore
path.attr('d', line(list))
  .attr('stroke'.'url(#linear-gradient)')
  .attr('stroke-width'.1.5)
  .attr('fill'.'none');
Copy the code

• rendering