d3.js - nvd3 图表中的单选按钮

Question

我试图稍微改变 nvd3 水平图表的行为。

现在水平图表有一个图例，可以选择同时选择多个图例项。我只是想一次只显示一个项目，以便在选择一个系列时，取消选择其他系列。

var data = [
  {
    "key": "Series1",
    "color": "#d62728",
    "values": [
      { 
        "label" : "A" ,
        "value" : 1
      } , 
      { 
        "label" : "B" ,
        "value" : 8
      } , 
    ]
    },
    {
    "key": "Series2",
    "color": "#1f77b4",
    "values": [
      { 
        "label" : "C" ,
        "value" : 25
      } , 
      { 
        "label" : "D" ,
        "value" : 16
      } , 

    ]
  }
]

nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .margin({top: 30, right: 20, bottom: 50, left: 175})
    .showValues(true)
    .tooltips(false)
    .showControls(false);

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

d3.select('#chart svg')
    .datum(data)
  .transition().duration(500)
    .call(chart);

nv.utils.windowResize(chart.update);

return chart;
});

我还在第 6264 到 6272 行修改了 nv.d3.js 的 multiBarHorizo​​ntalChart 部分，如下所示:

//============================================================
// Event Handling/Dispatching (in chart's scope)
//------------------------------------------------------------
data.map(function(d,i){
  d.disabled= true;
  return d;
});

这使得它的行为类似于单选按钮，但是当图表第一次加载时，Series1 和 Series2 都是可见的。

所以我的问题是“你如何只让一个系列可见？”

Answer 1

我最终更换了

var barsWrap = g.select('.nv-barsWrap').datum(data.filter(function(d, i) {return !d.disabled }))

在 nv.d3.js 文件中包含以下内容:

 var all_undefined = true;
 for (var i=0; i < data.length; i++){  
   if (data[i].disabled === true || data[i].disabled === false){
     all_undefined = false;
   }
 }
  if (all_undefined){
    var barsWrap = g.select('.nv-barsWrap')
      .datum(data.filter(function(d, i) {
        if (i===0){
        wrap.selectAll('.nv-series').classed('disabled', true);
        wrap.select('.nv-series').classed("disabled", false);
        return !d.disabled
        }
      }))  
  }
  else{
    var barsWrap = g.select('.nv-barsWrap')
      .datum(data.filter(function(d, i) {return !d.disabled }))
  }

不是一个非常优雅的解决方案，但它可以从水平条形图中的图例中制作单选按钮。