d3 lines - with intermediary points

dots.js

// assumes multiple lines on a graph
// like: {id: 'category one', values: [ [0,0], [1,1] [2,2] ... ]}


  // define circles as markers for the line to use
  lines.append('defs')
    .append('marker')
    .attr('id', d => `v-dot-${d.id}`)
    .attr('viewBox', [0, 0, 10, 10])
    .attr('refX', 5)
    .attr('refY', 5)
    .attr('markerWidth', 5)
    .attr('markerHeight', 5)
    .attr('fill', d => color(d.id))

    .append('circle')
    .attr('cx', 5)
    .attr('cy', 5)
    .attr('r', 5)
    .style('fill', d => color(d.id));

  // draw lines using the markers
  lines.append('path')
    .attr('stroke', d => color(d.id))
    .attr('d', d => path(d.values))
    .attr('marker-mid', d => `url(#v-dot-${d.id})`)
    .attr('marker-end', d => `url(#v-dot-${d.id})`)
    .attr('fill', 'none');