수평 다중 막대 차트의 도구 설명을 수정하는 방법 NVD3

Question

두 번째 데이터의 도구 끝을 수평 다중 막대에서 수정할 수 있습니까?

예를 들어 청색 데이터와 청색의 도구 팁에는 별도의 도구 팁이 있어야합니다.

여기 내 nvd3 코드입니다.

nv.addGraph(function() { 
    var chart = nv.models.multiBarHorizontalChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return d.value }) 
     // .yDomain([0, parseFloat(maxY)]) 
     .margin({top: 30, right: 20, bottom: 50, left: 175}) 
     .showValues(false)   //Show bar value next to each bar. 
     .showControls(false);  //Allow user to switch between "Grouped" and "Stacked" mode. 


    d3.select('#bar_chart svg') 
     .datum(sample_json()) 
     .transition().duration(1000) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

이 내가 .tooltip을 시도하고 몇 가지 기능을 가지고 있지만 작동하지 않습니다 .. TIA가 내 샘플 JSON

function sample_json(){ 
var data = [ 
    { 
    "key": "Example A", 
    "color": "#4f99b4", 
    "values": [ 
     { 
     "label" : "200000200000000" , 
     "value" : 2.8082472075876 
     } , 
     { 
     "label" : "200000200000000" , 
     "value" : 3.8082472075876 
     } 
    ] 
    }, 
    { 
    "key": "Example B", 
    "color": "#ff7f0e", 
    "values": [ 
     { 
     "label" : "200000200000000" , 
     "value" : 3.8082472075876 
     } 
    ] 
    }, 
    { 
    "key": "Example C", 
    "color": "#aec7e8", 
    "values": [ 
     { 
     "label" : "200000200000000" , 
     "value" : 8.8082472075876 
     } 
    ] 
    } 
] 

return data; 
} 

입니다!

Answer 1

다음은 수행 방법입니다. tooltip 및 tooltipContent 속성을 사용하고 if else 또는 switch 문을 사용하여 serie를 확인할 수 있습니다.

var chart = nv.models.multiBarHorizontalChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return d.value }) 
    // .yDomain([0, parseFloat(maxY)]) 
    .margin({top: 30, right: 20, bottom: 50, left: 175}) 
    .showValues(false)   //Show bar value next to each bar. 
    .showControls(false) 
    .tooltips(true) 
    .tooltipContent(function(key, y, e, graph) { 
     var tooltip_content = ''; 
     if(key == 'Example A'){ 
     tooltip_content = '';//tooltip content here 
     }else if (key == 'Example B'){ 
     tooltip_content = '';//tooltip content here 
     }else if (key == 'Example C'){ 
     tooltip_content = '';//tooltip content here 
     } 
     return tooltip_content; 
    });