HTML auf X-Achsen-Ticks rendern

Ich möchte HTML auf der X-Achse meines D3-Graphen rendern. Grundsätzlich möchte ich, dass jedes Etikett auf der Achse ein Hyperlink zu einer anderen Spalte aus den Daten ist.HTML auf X-Achsen-Ticks rendern

Ich habe

versucht

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

aber es funktioniert nicht, überhaupt nicht. Statt eines Hyperlinks bekomme ich den eigentlichen Text Wert erhalten:

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

ich auch versucht habe

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

auf der x-Achse hinzufügen, sowie zur Änderung der .attr("x", ...) zu

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

auf dem Diagramm selbst.

Fehle ich etwas?

Quelle

2016-05-18 202_accepted

Sie nicht html zu svg anhängen kann, es sei denn, Sie Fremdkörper verwendet werden, die nicht weit verbreitet ist. Ich würde vorschlagen, die Positionen jedes Ticks zu bekommen und html an diese Position an das Elternteil der SVG anzufügen. – thatOneGuy

Ich nehme an, dass ich keine HTML-Escape-Zeichen in der SVG auch dann rendern kann? (Ein anderes Problem, das ich habe, einen der 'Name' Werte hat' & 'darin.) –

nein nein kann. Überprüfen Sie dieses Beispiel: http://stackoverflow.com/questions/7458546/html-in-svg-in-html verwendet fremdes Objekt – thatOneGuy

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

Der Trick ist svg:foreignObject zu verwenden (wie von @thatOneGuy in den Kommentaren angegeben), dann können Sie einen beliebigen HTML innerhalb der Achsenbeschriftung platzieren. Die Funktion unter html unten wird data[i].name übergeben, wo man beliebiges HTML platzieren kann.

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; 
}

Quelle

2016-08-21 06:46:08 koppor

HTML auf X-Achsen-Ticks rendern

Antwort

Verwandte Themen