Wie fügt man dem NVD3-Graphen eine Umbruchfunktion hinzu?

Question

Wie kann ich die Etikettenumbruchfunktion von Mike Bostock (https://bl.ocks.org/mbostock/7555321) in mein nvd3-Diagramm einfügen?

createChart(graph_data, tickValue){ 
    if (graph_data) { 
     var chart; 

     nv.addGraph(function() { 
      var chart = nv.models.multiBarChart() 
        .reduceXTicks(false) //If 'false', every single x-axis tick label will be rendered. 
        .rotateLabels(-45)  //Angle to rotate x-axis labels. 
        .showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode. 
        .groupSpacing(0.15) //Distance between each group of bars. 
       ; 
      chart.xAxis 
       .tickFormat(function (i) { 
        return tickValue[i]; 
       }); 

      chart.yAxis 
       .tickFormat(d3.format(',.1f')); 

      d3.select('#chart1') 
       .datum(graph_data) 
       .call(chart); 

      return chart; 
     }); 
    } else { 
     return <div/> 
    } 
} 

tickValue[i] return Strings wie "Anrufdetails, Einstellungen und legen nahe, Autos zu bekommen".

Ich muss diese Zeichenfolge so umschließen, dass sie in mein Diagramm passt.

Ich habe versucht, mit Wrap-Funktion (https://bl.ocks.org/mbostock/7555321), aber ich bin nicht in der Lage, dies zu tun, wie es für d3 und nicht nvd3 ist.

Vielen Dank.

Answer 1

Hier ist, wie ich Beispiel mit der Frage verwendet habe.

Ich habe ein Beispiel verwendet, das ich in einem anderen Beitrag beantwortet habe. Here's eine funktionierende Version des Beispiels.

Add Margen auf das Diagramm, um es recht zu machen:

var chart = nv.models.multiBarHorizontalChart().margin({ 
    top: 30, right: 20, bottom: 50, left: 100 
}); 

Schließlich habe ich alle xAxis Zecken auf dem Chart und angewandter Mike Bostock’s Wrapping long labelsfunction wrap zu. Fügen Sie den folgenden Code am Ende Ihres Diagramms hinzu.

d3.selectAll(".nv-x.nv-axis .tick text").each(function(i, e) { 
    var text = d3.select(this), 
    words = text.text().split(/\s+/).reverse(), 
    word, line = [], lineNumber = 0, 
    lineHeight = 1.1, // ems 
    y = text.attr("y"), 
    dy = parseFloat(text.attr("dy")), 
    tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 

    while (word = words.pop()) { 
    line.push(word); 
    tspan.text(line.join(" ")); 
    // TDOD : Make 80 a dynamic value based on the bar width/height 
    if (tspan.node().getComputedTextLength() > 80) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
    } 
    } 
}); 

fertige Ausgabe

Hoffe, dass es

Answer 2

In nvd3 Version hilft 1.8.5 (ich weiß nicht, über ältere Versionen) wird dies bereits umgesetzt. Verwenden Sie einfach

wrapLabels: true