SVG d3 | posso aggiungere lo stile in linea in modo dinamico?

Question

Ho bisogno di aggiungere uno stile in linea al mio SVG dinamicamente. Ho oltre 1000 grafici SVG che devo salvare come PNG. Questi verranno quindi ospitati per il cliente finale (a cui non è consentito visualizzare i dati completi dietro ai grafici). Quando converto i grafici, devono mantenere la loro formattazione.

Gli SVG verranno aggiunti dinamicamente e ho bisogno di aggiungere la (stessa) dichiarazione di stile a ciascuno di essi. Questo è brutto, ma solo temporaneo fino a generare i PNG. Ho uno stile/esportazione in linea che funziona manualmente.

mia ultima fatica è questo:

addStyle(svg); 

function addStyle(svg) { 

    var style = svg.append("style") 
    .attr("type","text/css") 
    .attr("float","left"); 
} 

aggiunge un/elemento di stile stile, ma all'interno dei commenti. E ignora il galleggiante: a sinistra; se lo aggiungo come .attr() o .style().

MODIFICA: aggiunto codice CSS. Il CSS ho bisogno di aggiungere è questo per le tabelle:

g.axis path { 
    fill: none; 
    stroke: dimgray; 
    stroke-width: 0.5px; 

} 
g.axis g.tick line { 
    stroke: dimgray; 
    stroke-width: 1px; 
} 

g.grid g.tick line { 
    stroke: lightgray; 
    stroke-width: 0.5px; 
} 

path.lineF.cons, 
path.line.cons { 
    stroke: white; 
    fill: none; 
    stroke-width: 2px; 
} 


text.import { 
    fill: #FF376F; /* pink */ 
} 


rect.import { 
    fill: #FF376F; /* pink */ 
    stroke: white; 
    stroke-width: 1px; 
    cursor: pointer; 

} 
text.export { 
    fill: #0F86FF;/* blue */ 

} 

rect.export { 
    fill: #0F86FF;/* blue */ 
    stroke: white; 
    stroke-width: 1px; 
    cursor: pointer; 

} 

rect.prod2.area, 
path.area { 
    fill: #0F86FF; 
    opacity: 0.8; 
} 

path.areaF.prod, 
rect.prod.area, 
path.area.prod { 
    fill: black; 
    opacity: 0.4; 
} 

div.chart { 
    width: 100%; 
} 

div.chart svg#svg2 { 
    width: 100%; 
    height: 20000px; 
} 

div.chart svg { 
    width: 100%; 
    height: 15000px; 
} 

text { 
    fill: dimgray; 
/* font-size: 14px; */ 
    font-size: 90%; 
/* font-size: 1vw; */ 
} 


text.title { 
/* font-size: 20px; */ 
    font-size: 130%; 
    font-size: 1.4vw; 
    fill: dimgray; 
} 


text.titleMain { 
    fill: white; 
    font-size: 28px; 
/* 
    font-size: 2.5%; 
    font-size: 2.5vw; 
*/ 
} 

text.label { 
    font-size: 12px; 
} 

rect.titleRect { 
    fill: #1D5185; 
} 


text.source { 
    font-size: 9pt; 
    fill: gainsboro; 
    font-style: italic; 
} 

rect.opRate { 
    fill: black; 
    opacity: 0.6; 
} 

path.line.opRate { 
    stroke: #B7FF0F; /* lime */ 
    stroke-width: 3px; 
    fill: none; 
} 

text.opRate { 
    fill: #B7FF0F; 
} 


path.arP2 { 
    stroke-width: 2px; 
    fill: none; 
    stroke: black; 
} 


text.gr0 { 
    fill: #0F86FF; 
} 

text.gr2 { 
    fill: #FF376F; 
} 

text.gr1 { 
    fill: #06B04A; 

} 

path.gr0 { 
    stroke: #0F86FF; 
    stroke-width: 2px; 
    fill: none; 
} 
path.gr2 { 
    stroke: #FF376F; 
    stroke-width: 2px; 
    fill: none; 
} 
path.gr1 { 
    stroke: #06B04A; 
    stroke-width: 2px; 
    fill: none; 
} 

rect.negativeGrowth { 
    fill: black; 
    opacity: 0.1; 
} 

Per le tabelle, il CSS è questo:

text.source { 
    font-size: 9pt; 
    fill: gainsboro; 
    font-style: italic; 
} 



rect.th { 
    fill: #0F86FF; 
    stroke: white; 
    stroke-width: 1px; 
} 

rect.td { 
    stroke: white; 
    stroke-width: 1px; 
    fill: #C8E0F9; 
} 

text.tdLabel { 

    fill: black; 
} 

text.th { 
    fill: white; 
} 

text.tableTitle { 
    fill: #1D5185; 
    font-size: 1.5%; 
    font-size: 1.5vw; 
} 

E 'possibile fare quello che sto cercando di fare?

Answer 1

svg.append("style").text(cssText) 

dovrebbe farlo. Dove cssText sarebbe una stringa contenente tutto il tuo CSS.

che crea un tag di stile nel DOM e imposta il contenuto del testo in modo che sia il CSS necessario.

Answer 2

Non tutti i css si applicano agli elementi SVG. Ho trovato un elenco qui: css style on svg. Quello che vorrei fare è mettere ogni svg nel proprio elemento div (puoi farlo facilmente in D3), e poi dare uno stile agli elementi div. Trovo che lo styling di elementi html puri sia più facile degli SVG, specialmente quando ce ne sono molti.