Question

我使用http://mcaule.github.io/d3-timeseries/创建了一个用于数据可视化的图表。

使用的代码：

//data :
// [{date:new Date('2013-01-01'),n:120,n3:124,ci_up:130,ci_down:118} ...]
var chart = d3.timeseries()
  .addSerie(data,{x:'timestamp',y:'a'},{interpolate:'linear',color:"#a6cee3",label:"value"})
  .addSerie(data,
      {x:'timestamp',y:'b'},
      {interpolate:'monotone',dashed:true,color:"#a6cee3",label:"prediction"})
  .width(900)

chart('#chart')

我通过添加addSeri方法在图表中包含多行。

我想要包含功能，我可以根据用户在图表中看到的内容使这些行可见或不可见。

应该是this之类的东西。如何在我的图表中包含此功能？

我已经在图表中有多行，我只需要切换功能。

Answer 1

是否有更新图表数据的功能？如果答案是肯定的，那么您只需要在主数据中添加一个新标志，并在用户点击图例并重新绘制或更新图表时启用/禁用它。在绘图功能中，您必须检查是否为每一行启用了标志，然后允许它被绘制。

但是如果你没有更新功能...那么..也许它是一个解决方案，可以在你父容器之后（或者当时）附加你的行的引用，然后点击图例如果你想要实现给定的例子，你仍然必须重新绘制你的轴。所以我建议你为你的图表制作一个更新功能，你可以根据新的数据重新绘制你的图表。

更新：我只是觉得你是从零开始制作一个D3图表，但是在发布之后我注意到你正在使用一个脚本，它具有基于D3.js生成折线图的功能

更新2：由于我不确定整个剧本的外观如何，我只能猜测这可能对你有用...... 在HTML（图表元素之外）的某个位置放置一个按钮

<button onclick="toggleLine('.ci-area',1)">Toggle Spreaded Region</button>
<button onclick="toggleLine('.line',1)">Toggle Line 1</button>
<button onclick="toggleLine('.line',2)">Toggle Line 2</button>

并将其添加到图表脚本的底部

function toggleLine(selector,index){
   var line = d3.selectAll(selector).filter(function(d,i){ return i==index-1;});

  // so here we get a reference to initial opacity if its not always "1"
  if(!line.attr("initial-opacity")){
        line.attr("initial-opacity",line.style('opacity'));
  }


  line.style('opacity',(line.style('opacity')==0 ? line.attr("initial-opacity") : 0));
}

顺便说一下，你也可以使用CSS类并为你选择的图元素切换它，例如：

.hide-graph-element{ opacity:0 }

希望它有所帮助。

在D3图表中包含图例功能（切换）

1 个答案: