2012-03-06 13 views
16

jQuery Flot kullanarak, çizim düzeneğine null değerini iletebilirim, böylece çizim üzerinde hiçbir şey çizmeyecek. Eksik kayıtlar bastırılmış nasıl bakınız:Null değerlerini bastırmak için null değerlerini SVG yoluna geçir (d3.js kullanarak)

enter image description here

ben SVG'yi kullanarak grafik derin düşük seviye kontrole sahip, böylece d3js geçmek için arıyorum. Ancak, eksik kayıtları bastırmak için de aynı işlemi nasıl yapacağımı henüz öğrenmedim. Aşağıdaki görüntü,(d3 paketinin bozulduğu yer) yerine 0 değerini kullanarak bunu yapma girişimidir. İşte size aşağıda grafik çıkarttı hakkında bir fikir vermek için bazı kod şudur:

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

enter image description here

Mozilla Geliştirici Network SVG path eleman baktı ve ben orada olduğunu öğrendim MoveTo komutu, M x y, sadece "kalem" i herhangi bir şey çizmeden bir noktaya taşır. Bu, d3js paketinde uygulandı mı? Böylece, eksik bir kayıtla her karşılaştığımda birkaç path öğesi oluşturmam gerekmeyecek mi?

+2

Not olduğunu Basit (sadece inme) satırında boşluklar, ancak işe yaramazsa, yukarıda gösterdiğiniz yeşil dolgu ile çalışacaktır. Bunun için, taban çizgisine inmek, doğru miktarda gelmek ve tekrar geri gelmek için farklı şekillere veya gereksiz yol komutlarına ihtiyacınız vardır. – Phrogz

+0

Grafiklere bayılıyorum, ancak ayrıca bakınız: http://stackoverflow.com/questions/15259444/drawing-non-continuous-lines-with-d3 –

cevap

27

d3.svg.line() ait defined işlevi yapmak yoludur bu

en y ye null ise grafikte bir mola eklemek istediğiniz diyelim: MoveTo kullanarak sahibi olmak için çok iyi olurdu

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

@Kit, lütfen bunu cevap olarak işaretleyiniz – Amit

+0

Bu harika bir teşekkür! –

18

line.defined veya area.defined kullanın ve Area with Missing Data örneğine bakın.

+1

Teşekkürler, ben buna bakacağım. Aslında ben sadece Github bu konuda bir sorun kaldırdı :) Ancak bununla birlikte ilerlemek gerçekten emin değilim :(https://github.com/mbostock/d3/issues/583 – Kit

+2

Ne d3.split nedir? Bu sayfada bir şey yok Http://stackoverflow.com/questions/15259444/drawing-non-continuous-lines-with-d3 şimdi nasıl yapılacağını gösterdiği için yanıtınızı da güncellemelidir. –

İlgili konular