Linia przed kropkami w d3.js

Question

Zrobiłem wykres słupkowy / liniowy w d3.js v5 i mam problem, którego nie mogę ogarnąć. Linia przebiega nad kropkami, co zakłóca działanie podpowiedzi i nie wygląda zbyt ładnie.

Moje pytanie brzmi: jak sprawić, by kropki znalazły się na górze linii.

Oto pełne przykładowe skrzypce przykładowe .

Przykład kodu

    // 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));

Próbowałem użyć indeksu z w CSS i bezpośrednio w JS, ale nie mogę dostać się do pracy. Próbowałem również przenieść kod kropkowy nad kod linii, który nie działał.

Pomoc będzie bardzo mile widziana.

Answer 1

usunąć

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);

Dodaj

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);

I umieść na dole strony.

zobacz nowe skrzypce