So fügen Sie Bilder zu c3.js generierten Diagrammen hinzu

Question

Ich habe versucht, ein Bild zu einem Diagramm hinzuzufügen - ein rotiertes Balkendiagramm zum Beispiel. Der Zweck besteht darin, ein Ziel für die Serie wie eine Flagge visuell festzulegen.

Ich konnte das Bild hinzufügen, als SVG-Element, nachdem das Diagramm zu erstellen:

var chart = c3.generate('#foo', _chartOptions)); 

// put goal 
var svg = d3.select($('#foo svg')[0]); 
var imgs = svg.selectAll("image").data([0]); 
imgs.enter() 
.append("svg:image") 
.attr("xlink:href", "img/flag1.png") 
.attr("x", "60") 
.attr("y", "0") 
.attr("width", "20") 
.attr("height", "20"); 

Aber es funktioniert nicht für das, was ich will, weil die ‚Flagge‘ zu einem bestimmten verknüpft werden muss Wert unter der Reihe. Wie kann ich die Position eines bestimmten Wertes in der Achse finden? Gibt es eine Möglichkeit, die Transformationsmatrix oder etwas zu finden? Oder gibt es eine interne Funktion, die ich verwenden könnte?

Answer 1

Versuchen Sie dies, indem Sie die Element-Elternklasse verwenden.

var stopUpper = d3.select('.upperStop'); 
    stopUpper.append('image') 
     .attr("xlink:href", "ExtGWT/images/default/shared/stop_32.png") 
     .attr("x",10) 
     .attr("y", (US-10)) 
     .attr("width", 20) 
     .attr("height", 20);