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

我还修改了nv.d3.js的multiBarHorizontalChart部分，并在第6264到6272行修改了以下内容：

//============================================================
// 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 }))
  }

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

Answer 2

我遇到了同样的问题，并最终创建了一个补丁，解决了这个问题，我认为，这是一个更清晰的方式来对抗最新版本。你可以关注这个问题＆amp;拉请求：

https://github.com/novus/nvd3/issues/168

nvd3图表中的单选按钮

2 个答案: