2

nvd3水平チャートの動作を少し変更しようとしています。

現在、水平チャートには凡例があり、複数の凡例アイテムを同時に選択するオプションがあります。1つのシリーズを選択すると、他のシリーズの選択が解除されるように、一度に1つのアイテムのみを表示しようとしています。

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のmultiBarHorizo​​ntalChart部分を、6264行目から6272行目で次のように変更しました。

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

これにより、ラジオボタンのように動作しますが、グラフが最初に読み込まれると、Series1とSeries2の両方が表示されます。

だから私の質問は「どうやって1つのシリーズだけを見えるようにするのですか？」です。

4

2 に答える 2

2

交換してしまいました

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

あまり洗練されたソリューションではありませんが、横棒グラフの凡例からラジオボタンを作成するために機能します。

于 2013-01-31T05:55:25.940 に答える
1

私は同じ問題を抱えていて、これを解決するパッチを作成することになりました。これは、最新バージョンに対してよりクリーンな方法だと思います。ここで問題とプルのリクエストに従うことができます：

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

于 2013-07-01T05:58:25.297 に答える