Chuyển giá trị null vào đường dẫn SVG (sử dụng d3.js) để chặn dữ liệu bị thiếu

Question

Sử dụng jQuery Flot, tôi có thể chuyển giá trị null cho cơ chế vẽ đồ họa để nó không vẽ bất kỳ thứ gì trên lô. Xem cách các hồ sơ còn thiếu đang bị đàn áp:

tôi đang tìm cách để chuyển sang d3js, vì vậy mà tôi có thể kiểm soát mức độ thấp sâu sắc hơn về đồ họa sử dụng SVG. Tuy nhiên, tôi vẫn chưa tìm ra cách để thực hiện cùng một quy trình ức chế các bản ghi còn thiếu. Hình ảnh bên dưới là một nỗ lực để thực hiện việc này, sử dụng giá trị 0 thay vì null (trong đó gói d3 bị hỏng). Dưới đây là một số mã để cung cấp cho bạn một ý tưởng về làm thế nào tôi sản xuất đồ thị dưới đây:

var line = d3.svg.line() 
    .x(function(d) { 
     var date = new Date(d[0]); 
     return x(date); 
    }) 
    .y(function(d) { 
     var height = d[1]; 
     if (no_record_exists) { 
      return y(0); 
     } 
     return y(height) + 0.5; 
    }); 

Tôi nhìn lên các yếu tố SVG path tại Developer Network Mozilla, và tôi phát hiện ra rằng có một Lệnh MoveTo, M x y, chỉ di chuyển "bút" đến một số điểm mà không cần vẽ bất kỳ thứ gì. Điều này đã được thực hiện trong gói d3js, sao cho tôi không phải tạo ra một số phần tử path mỗi lần tôi gặp phải một bản ghi bị thiếu?

Answer 1

Chức năng defined của d3.svg.line() là cách để làm điều này

Hãy nói rằng chúng tôi muốn bao gồm một break trong bảng xếp hạng nếu y là null:

line.defined(function(d) { return d.y!=null; }) 

Answer 2

Sử dụng line.defined hoặc area.defined và xem ví dụ Area with Missing Data.