Liniendiagramm mit ordinal x-Achse mit d3.js und nvd3.js

Ich versuche, ein Liniendiagramm aus einem Dataset zu erstellen, während X-Achse kategorisch zu bleiben. Für den Betrachter wie ein Liniendiagramm mit äquidistantem Abstand es zwischen Beobachtungen X-Koordinaten aussehen:Liniendiagramm mit ordinal x-Achse mit d3.js und nvd3.js

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

Denn jetzt ich so etwas wie dieses bin immer:

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

Dies ist mein Datensatz:

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

Ich habe versucht zu erstellen und die Ordnungs Achse eingestellt es in der Linie Diagrammobjekt:

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

Nichts scheint jedoch auf dem Grundstück zu ändern.

Ich frage mich, könnte die Ordinalachse überhaupt in der NVD3 Liniendiagramm-Implementierung aktiviert sein oder dieses Liniendiagramm wurde nur für numerische Daten geschrieben?

PS: Ich bin neu bei d3.js, also könnte ich hier etwas falsch machen.

Quelle

2013-01-03 user1946927

Können Sie Ihre Lösung posten? – Becky

Versuchen Sie, rangeBounds ([0, chartWidth]) für die Skala festzulegen. d.h

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

Korrektur: Ich dachte, Ihre Waage geändert werden musste, aber Sie wollen eigentlich die Linie die Werte aufgetragen gleich weit entfernt sein müssen, aufgetragen. Um dies zu tun, möchten Sie möglicherweise das Dataset, das Sie an den lineGraph senden, so ändern.

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

Auf diese Weise, während die in der x-Achse gezeigt Werte ordinal sein (d.h. 1, 5, 30, 600), aufgetragen, um die Werte für die Zeile auf einer linearen Skala sein.

Quelle

2013-01-14 17:02:24 baradas

Vielen Dank, ich habe RangeBands (..) in der Dokumentation erkundet, aber Achsenticker ändern sich immer noch nicht, um mit der Ordinalskala äquidistant zu sein. – user1946927

Möchten Sie, dass die Graph-Ticker äquidistant oder die im Diagramm aufgetragenen Punkte auf der x-Achse äquidistant sind? Der obige Code ändert die xAxis-Tickmarkierungsskala, aber nicht die Skalierung für die Linie, die unter Verwendung der obigen Daten geplottet wird. Leider gibt es keinen direkten Zugriff, um dies in der NVD3 API zu ändern. Sehen Sie sich die models.lineChart-Implementierung in nv.d3.js an. Eine Möglichkeit, diese zu implementieren, besteht darin, die X-Achsen-Datenelemente in Werte umzuwandeln, die Indizes ihrer Positionen darstellen. – baradas

Ich denke, Sie können eine Ordinal-Domäne für keine Linie oder Punktdiagramm in nvd3 festlegen. Diese Linien sind in der models.scatter Definition:

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

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

Offensichtlich ist dies keine ordinal Waagen für die x nicht zulassen wird oder y Skalen in dieser Art von Diagramm (die die Liniendiagramm zugrunde liegt, und die meisten der anderen nicht-Balkendiagrammen es scheint).

Quelle

2013-08-29 16:38:27 rlgoodman

Liniendiagramm mit ordinal x-Achse mit d3.js und nvd3.js

Antwort

Verwandte Themen