d3.js ve nvd3.js ile ordinal x-ekseni kullanan çizgi grafiği

Question

X ekseni kategorik olarak tutulurken bir veri kümesinden bir çizgi grafik oluşturmaya çalışıyorum. gözlemin X arasında eşit mesafede aralıklı bir çizgi grafiği gibi görünecek bir gözlemci için koordinatları:

(1 ------ 5 ------ 30 ------ 600)

(1-5 ----- 30 ------------------- 600)

: şimdi böyle bir şey alıyorum için

Bu benim veri kümem:

var ds1 = [ 
    { 
    key: 'VAR-1', 
    color: '#FF7F0E', 
    values: [ 
    { "x" : "600", "y" : 0.07706} 
, { "x" : "30", "y" : 0.00553} 
, { "x" : "5", "y" : 0.00919} 
, { "x" : "1", "y" : 0.00969} 
    ] 
    } 
]; 

Oluşturmaya çalıştım Sıralı eksen ve çizgi grafiği nesnesinde ayarlayın:

var chart =nv.models.lineChart() 
      .margin({top: 10, bottom: 40, left: 60, right: 30}); 
var x = d3.scale.ordinal().domain(["1","5", "30", "600"]); 
chart.xAxis.scale(x); 

chart.yAxis 
    .tickFormat(d3.format(',.3f')); 

chart.forceY([0]); 

d3.select('#exampleOne') 
    .datum(ds1) 
    .transition().duration(500) 
    .call(chart); 

Hiçbir şey ancak arsa üzerinde değişiyor gibi görünüyor.

merak ediyorum, sıra eksen NVD3 çizgi grafiği uygulanmasında tamamen devre olabilir veya bu çizgi grafiği sayısal veriler yalnızca için yazılmıştır?

Not: D3.js'ye yeni oldum, bu yüzden burada yanlış bir şeyler yapıyorum.

Answer 1

Terazi için rangeBounds ([0, chartWidth]) ayarlamayı deneyin. yani

d3.scale.ordinal().domain(["1","5", "30", "600"]).rangeBounds([0, width]); 

Düzeltme: Ben değiştirilmesi gereken senin ölçekler, ama aslında hat olmak değerlerin eşit uzaklıkta çizilen var çizilen istiyorum. Bunu yapmak için, lineGraph'a gönderdiğiniz veri kümesini değiştirmek isteyebilirsiniz.

var ds1 = [ { 
key: 'VAR-1', 
color: '#FF7F0E', 
values: [ 
{ "x" : "4", "y" : 0.07706} 
, { "x" : "3", "y" : 0.00553} 
, { "x" : "2", "y" : 0.00919} 
, { "x" : "1", "y" : 0.00969} 
]} 
]; 

x ekseninde gösterilen değerler sıra olacak ise bu şekilde (yani 1, 5, 30, 600) değerler, doğrusal bir ölçek üzerinde hat için grafiğe geçirilmiştir.

Answer 2

nvd3'teki herhangi bir çizgi veya dağılım grafiği için bir ordinal etki alanı ayarlayamazsınız. Bu hatlar, models.scatter tanımı vardır:

if (isNaN(x.domain()[0])) { 
     x.domain([-1,1]); 
    } 

    if (isNaN(y.domain()[0])) { 
     y.domain([-1,1]); 
    } 

Açıkçası bu çizgi grafiği altında yer alır ve bu grafik türünde (herhangi bir x sıra ölçekler veya y terazi izin vermez olmayan diğer çubuk grafikler en görünüyor).