2012-12-03 6 views
8

Aggiornamento: Ecco un esempio del problema - http://jsfiddle.net/Hffks/2/linea D3 in qualità di un percorso chiuso

Sto cercando di utilizzare D3 per codificare un grafico a linee e la mia linea è chiusa alla fine, con la quale Voglio dire che agisce come un percorso chiuso in cui il primo e l'ultimo punto sono gli stessi. I miei dati arriva nel seguente formato JSON:

[ entityA : [ { time : 1230000, // time since epoch 
      attribute1 : 123 // numeric value 
      attribute2 : 123 // numeric value 
      }, 
       { time : 1230010, // time since epoch 
       attribute1 : 123 // numeric value 
       attribute2 : 123 // numeric value 
      } ], 
    entityB : [ { ... // same format as above 
    ... 
] 

sto usando un standard di dichiarazione di una linea (d3.svg.line con una funzione per x ed y):

var line = d3.svg.line() 
     .x(function(d) { 
      return x_scale(d.c_date)); 
     }) 
     .y(function(d) { 
      return y_scale(d.total); 
     }); 

poi dentro un ciclo for che scorre oltre le entità che sto aggiungendo un "svg: percorso":

canvas.append("svg:path") 
      .attr("d", line(data[entity])) 

Tutto il resto dei lavori grafico: i punti sono correttamente posizionati, non ho più linee indipendenti per ogni entità, gli assi sono disegnato, e Tuttavia, ciascuna linea indipendente agisce come un percorso chiuso.

Grazie in anticipo per qualsiasi aiuto!

+1

Non dovrebbe chiudere il percorso da solo. Puoi fornire un piccolo esempio completo, ad es. a [jsfiddle] (http://jsfiddle.net/)? –

+0

Ecco praticamente cosa ho fatto: http://jsfiddle.net/Hffks/2/ – user1872632

+0

In realtà non sta creando un percorso chiuso, lo sta semplicemente riempiendo di default. Se imposti il ​​riempimento e il tratto in modo esplicito, vedi le singole linee. E 'questo quello che stai cercando? http://jsfiddle.net/Hffks/3/ –

risposta

15

I percorsi sono riempiti per impostazione predefinita. Se si imposta fill su "none" e stroke su "nero", si vedrà che il percorso non è chiuso, ma sembra essere solo.

violino di lavoro: http://jsfiddle.net/Hffks/3/

+0

Grazie @ lars-kotthoff il tuo suggerimento è stato molto utile. – Laxman

+0

Come principiante per il rendering di D3 e SVG in generale questo tipo di cose è un haha ​​davvero non ovvio. Sono contento di aver trovato la tua soluzione. –

Problemi correlati