Ligne devant les points dans d3.js

Question

J'ai créé un histogramme / graphique linéaire dans d3.js v5 et j'ai un problème que je n'arrive pas à comprendre. La ligne passe au-dessus des points, ce qui perturbe l'info-bulle et n'a pas l'air très joli.

Ma question est la suivante: comment faire pour que les points soient en haut de la ligne.

Voici l'exemple de violon complet .

Exemple de code

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

J'ai essayé d'utiliser z-index dans le CSS et directement dans le JS mais je ne peux pas faire fonctionner l'un ou l'autre. J'ai également essayé de déplacer le code point au-dessus du code de ligne qui ne fonctionnait pas.

L'aide sera très appréciée.

Answer 1

retirer

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

ajouter

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

Et placez-le en bas de page.

voir le nouveau violon