Rendering HTML su tacche X-Axis

Mi piacerebbe rendere l'HTML sull'asse x del mio grafico D3. Fondamentalmente, voglio che ogni etichetta sull'asse sia un collegamento ipertestuale a un'altra colonna dai dati.Rendering HTML su tacche X-Axis

Ho provato

x.domain(data.map(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; }));

ma non sta funzionando, a tutti. Invece di ottenere un collegamento ipertestuale ottengo il valore di testo attuale:

<a href="http://example.com">Something</a>

Ho anche provato ad aggiungere

.tickFormat(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; })

su l'asse x, oltre ad alterare il .attr("x", ...) a

.attr("x", function(d) { return "<a href=\"" + d.SiteUrl + "\">" + x(d.Name) + "</a>"; })

sul grafico stesso.

Mi manca qualcosa?

fonte

2016-05-18 202_accepted

non è possibile aggiungere html SVG, a meno che non si utilizza oggetto estraneo che non è ampiamente utilizzato. Suggerirei di ottenere le posizioni di ogni tick e di aggiungere html a quella posizione al genitore dello svg – thatOneGuy

Suppongo di non poter visualizzare alcun carattere di escape HTML anche in SVG, quindi? (Un altro problema che sto avendo, uno dei valori 'Name' ha' & 'in esso.) –

no no può fare. Guarda questo esempio: http://stackoverflow.com/questions/7458546/html-in-svg-in-html utilizza oggetti estranei – thatOneGuy

(Basato su https://groups.google.com/d/msg/d3-js/zoUjrm75iCg/EJg0YhnTw3YJ)

Il trucco è quello di utilizzare svg:foreignObject (come affermato da @thatOneGuy nei commenti), allora si può inserire qualsiasi codice HTML all'interno dell'etichetta dell'asse. La funzione html in basso viene passata a data[i].name, dove è possibile inserire codice HTML arbitrario.

var height = 500; 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickSize(0).tickPadding(0).tickFormat(function(d) {return '';}); 

var tx = -5; 
var ty = 2; 
var tw = 50; 
var th = 10; 

chart.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("g") 
    .append("svg:foreignObject") 
    .attr("width",tw) 
    .attr("height",th) 
    .attr("x", tx) 
    .attr("y", ty) 
    .append("xhtml:div") 
    .attr("class", "my-x-axis-label") 
    .html(function(schema) {return schema;});

CSS:

div.my-x-axis-label { 
    font: 10px sans-serif; 
}

fonte

2016-08-21 06:46:08 koppor

Rendering HTML su tacche X-Axis

risposta

Problemi correlati