Segmenti di controllo su linea

Question

Tipo di una domanda semplice ... Utilizzo correttamente il generatore d3.svg.line ma ora devo essere in grado di esercitare un maggiore controllo su ogni singolo segmento nella linea generale. Ad esempio, ogni segmento potrebbe dover essere colorato in modo diverso. Oppure ogni segmento potrebbe anche necessitare di uno spessore diverso (rastremato o in base allo spessore dei segmenti adiacenti).

Mi chiedo quale sia lo strumento migliore per raggiungere questo obiettivo. Sto pensando o forse. O forse anche solo continuare a usare d3.svg.line ma rendere ogni segmento la propria linea.

ricerca di esperienze di altre persone con questo tipo di ricchi rendering delle linee ...

Answer 1

Non c'è nessuna struttura attuale per questo nel D3, ma c'è un open feature request alla porta segmented lines da Protovis. Il Protovis implementation è un po 'complicato perché ha bisogno di calcolare giunture per i segmenti di linea adiacenti, ma è sicuramente fattibile. SVG 2.0 può includere una funzionalità per ottenere la struttura di un percorso tracciato, che elimina la necessità di implementarlo in puro JavaScript.

Nel frattempo, è possibile utilizzare l'elemento di riga di SVG o un semplice elemento a due elementi d3.svg.line per creare i propri segmenti di linea. La proprietà stroke-linecap predefinita lascerà spazi tra linee adiacenti di angoli diversi; puoi usare stroke-linecap: round; se preferisci che si sovrappongano.