estimating-trends/src/js/d3/userline.js

import * as d3 from 'd3';
import addLegendItem from './legend';

// d3js module for module03: add painted user line
export default (selection, scales, options) => {

  // get line coordinates
  const valueline = d3.line()
    .curve(d3.curveCardinal)
    .x(d => scales.xScale(d[options.xKey]))
    .y(d => scales.yScale(d[options.yKey]));

  const currClass = `mod${options.module}-line--user`;

  // append group for current line
  const group = selection
    .selectAll(`.${currClass}`)
    .data([ options.userEntries ])
    .enter()
    .append('g')
    .attr('class', `mod${options.module}-line  ${currClass} ${options.isCurrent ? `mod${options.module}-line--active` : ''}`);

  // append line
  group.append('path')
    .attr('stroke', options.colors.graph)
    .attr('stroke-width', 2)
    .attr('fill', 'none')
    .attr('d', d => valueline(d));

  // add legend for current line
  addLegendItem(group, options, 'Ihre Schätzung');
};