NVD3 그래프에 라벨 감싸기 기능을 추가하는 방법은 무엇입니까?

Question

Mike Bostock (https://bl.ocks.org/mbostock/7555321)의 라벨 감싸기 기능을 내 nvd3 그래프에 추가하는 방법은 무엇입니까? "세부 사항, 환경 설정을 얻기 위해 전화를 걸어 차를 제안한다"와 같은

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] 반환 문자열.

내 그래프에 맞도록이 문자열을 감쌀 필요가 있습니다.

랩 기능 (https://bl.ocks.org/mbostock/7555321)을 사용해 보았지만 d3이 아니고 nvd3이 아니기 때문에 할 수 없습니다.

감사합니다.

Answer 1

다음은 질문과 함께 Mike Bostock’s Wrapping long labels 예제를 사용한 예입니다.

나는 다른 게시물에서 대답 한 예제를 사용했습니다. Here's 예제의 작동 버전. 차트에

추가 마진은 꽤 만들려면 :

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

마지막으로 나는 차트의 모든 xAxis 진드기를 선택하고 그것에 Mike Bostock’s Wrapping long labels function wrap을 적용했다. 차트 아래쪽에 다음 코드를 추가하십시오.

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

최종 출력은이 이미 구현되어 nvd3 버전 1.8.5 (I은 이전 버전에 대해 알고하지 않습니다)에서

Answer 2

을 도움이되기를 바랍니다. 그냥 사용하십시오

wrapLabels: true