d3.js 中点前面的线答案

【问题标题】：Line in front of dots in d3.jsd3.js 中点前面的线
【发布时间】：2020-10-02 10:51:29
【问题描述】：

我在 d3.js v5 中制作了条形图/折线图，但我遇到了一个无法解决的问题。这条线在点的顶部运行，这破坏了工具提示并且看起来不太好。

我的问题是，我如何让这些点在线上。

这是完整的工作示例fiddle.

代码示例

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

我曾尝试在 CSS 中和直接在 JS 中使用 z-index，但我都无法正常工作。我还尝试将点代码移到不起作用的行代码上方。

我们将不胜感激。

【问题讨论】：

SVG中没有z-index，元素的可见性由绘制顺序决定。看看我的这个答案中的 "SVG，绘图顺序" 部分：stackoverflow.com/a/39157451/5768908
我已将绘制点的代码移动到最后绘制的东西，但它只修复了最后一个点jsfiddle.net/lucasj01uk/q1xr095t/8
啊，好的，我在底部的这个小提琴上更改了 bar.append('circle') ！ jsfiddle.net/lucasj01uk/q1xr095t/9 干杯伙伴！

标签： javascript css d3.js

【解决方案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);

并放在页面底部。

见new fiddle

【讨论】：