水平マルチバーチャートのツールチップを変更する方法NVD3

Question

第2データのツールチップを水平マルチバーで修正することは可能ですか？

たとえば、青色のデータと青色のツールチップには別のツールチップが必要です。

は、ここに私の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; 
    });