Dòng trước dấu chấm trong d3.js

Question

Tôi đã tạo biểu đồ thanh / biểu đồ đường trong d3.js v5 và tôi gặp sự cố mà tôi không thể giải quyết được. Dòng chạy trên đầu các dấu chấm làm gián đoạn chú giải công cụ và trông không đẹp cho lắm.

Câu hỏi của tôi là, làm thế nào để các dấu chấm ở trên cùng trên dòng.

Đây là ví dụ làm việc đầy đủ fiddle.

Mẫu mã

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

Tôi đã thử sử dụng z-index trong CSS và trực tiếp trong JS nhưng tôi không thể hoạt động. Tôi cũng đã thử di chuyển mã dấu chấm lên trên mã dòng không hoạt động.

Giúp đỡ sẽ được rất nhiều đánh giá cao.

Answer 1

tẩy

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

thêm vào

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

Và đặt xuống cuối trang.

xem trò chơi mới