Линия перед точками в d3.js

Question

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

Мой вопрос в том, как мне добиться, чтобы точки были сверху на линии.

Вот полный рабочий пример скрипки.

Пример кода

    // line chart dots
bar.append('circle')
  .attr('class', 'dot')
  .attr('cx', function (d, i) {
    return xScale(d[0]) + xScale.bandwidth() / 2; // / 2 links dots over center of bar bandwidth
  })
  .attr('cy', function (d) {
    return yScale(d[1]);
  })
  .attr('r', 10)
  .on('mouseover', mouseover)
  .on('mousemove', mousemove1)// Line chart tooltip
  .on('mouseleave', mouseleave);

// line chart
const line = d3.line()
  .x(function (d, i) {
    return xScale(d[0]) + xScale.bandwidth() / 2;  // / 2 links line over center of bar bandwidth
  })
  .y(function (d) {
    return yScale(d[1]);
  })
  .curve(d3.curveMonotoneX);

bar.append('path')
  .attr('class', 'line')
  .attr('d', line(dataset));

Я пробовал использовать z-index в CSS и непосредственно в JS, но не могу заставить работать. Я также попытался переместить точечный код над кодом строки, который не сработал.

Помощь будет очень признательна.

Answer 1

удалять

bar.append('circle')
  .attr('class', 'dot')
  .attr('cx', function (d, i) {
    return xScale(d[0]) + xScale.bandwidth() / 2; // / 2 links dots over center of bar bandwidth
  })
  .attr('cy', function (d) {
    return yScale(d[1]);
  })
  .attr('r', 10)
  .on('mouseover', mouseover)
  .on('mousemove', mousemove1)// Line chart tooltip
  .on('mouseleave', mouseleave);

Добавить

g.selectAll('dot')
  .data(dataset)
  .enter().append('circle')
  .attr('class', 'dot')  
  .attr('cx', function (d, i) {return xScale(d[0]) + xScale.bandwidth() / 2})  
  .attr('cy', function (d, i) {return yScale(d[1])})
  .attr('r', 5)  
  .on('mouseover', mouseover)
  .on('mousemove', mousemove1)// Line chart tooltip
  .on('mouseleave', mouseleave);

И поместите внизу страницы.

увидеть новую скрипку