Semplificando la stringa generata dal percorso SVG di D3js

Question

Sto cercando di ottimizzare un po 'l'SVG che sto generando utilizzando il fantastico modulo geografico D3js.

Sto usando d3.geo.path come il generatore di attributo d per i percorsi SVG:

path = d3.geo.path().projection(config.projection); // projection is initialized somewhere else 

e poi usarlo per rendere i percorsi come questo:

svg.selectAll(".country") 
    .data(countries) 
    .enter() 
    .insert("path", ".graticule") 
    .attr({ 
     class: "country", 
     d: path 
    }) 

e il tipo di percorso corde che sto ottenendo sono come questo:

M713.601085,459.8780053259876L714.7443994399441,460.08170562468473L715.0310281028103,460.5903728431771L715.0310281028103... 

Come si può vedere, alcuni i numeri sono estremamente lunghi con troppi decimali e non sono veramente utili alla mia attuale risoluzione, che ostruisce un po 'il DOM e rende pigro il debug di questi percorsi (ce ne sono anche molti, dato che è una mappa del mondo con un sacco di paesi disegnati su di esso).

Quindi il mio primo approccio è stato la creazione di questo pathSimplified wrapper per path:

// Path simplified: take some decimals out of the 'd' string 
pathSimplified = function (d) { 
     return path(d).replace(/(\.\d{4})\d+/g, '$1'); 
    }; 

e poi usarlo al posto del path:

//... 
    .attr({ 
     class: "country", 
     d: pathSimplified 
    }) 

che funziona e ora ho solo 4 cifre decimali per ogni valore sulla stringa del percorso. Mi piace questo:

M713.6010,459.8780L714.7443,460.0817L715.0310,460.5903L715.0310... 

La mia domanda è: può essere fatto in un modo migliore, meno hackerato? Non sembra giusto modificare la stringa dopo che è stata sputata dalla funzione path di D3js e sarebbe bello specificare l'arrotondamento a un certo punto del percorso stesso o della proiezione ...

Answer 1

La tua idea è buona, semplificando una polilinea aiuta, ma puoi certamente farlo meglio di troncare le coordinate: algoritmi per la polilinea Esistono e potrebbero dare risultati più belli.

Ad esempio, dare un'occhiata allo Ramer-Douglas-Peucker algorithm. È implementato in librerie come Simplify.js (controlla la demo su quella pagina), che ti permette anche di regolarlo con tolleranza. Dovrai passare la linea come una matrice di x/y coords, ma credo che non sia troppo complicato da fare.

Ho anche notato che le proiezioni geografiche d3 consentono un parametro di precisione (come here), forse c'è qualcosa di simile a cui si è trascurato? In ogni caso, semplificare le coordinate da solo con semplify.js è sempre possibile.