dimple.js/d3.js：如何切換系列

Question

我有下面的代碼，使圖表上的兩個系列以及圖例。我想要做的是當相應的圖例項目被點擊時，我想隱藏/取消隱藏相關係列行。我不知道如何做到這一點。我見過這個樣本：http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends。但我不認爲它適用於此，因爲該示例使用了單個系列，因爲我繪製了兩條不同的線。

任何人都知道我可以如何解決？我可以根據哪個圖例項目被點擊來檢索系列線嗎？

<div id="chart1"> 
    <script> 
     var svg1 = dimple.newSvg("#chart1", 600, 500); 
     var data1 = [[{x: '01/31/1998', y: 100.0}, {x: '02/28/1998', y: 110.0}, {x: '03/31/1998', y: 120.0}, {x: '04/30/1998', y: 130.0}], 
        [{x: '01/31/1998', y: 120.0}, {x: '02/28/1998', y: 130.0}, {x: '03/31/1998', y: 140.0}, {x: '04/30/1998', y: 150.0}]] 

     var chart1 = new dimple.chart(svg1); 
     chart1.setBounds(70, 30, 400, 300) 
     var xAxis = chart1.addTimeAxis("x", "x", "%m/%d/%Y", "%b %y"); 
     xAxis.title="Date" 
     var yAxis = chart1.addMeasureAxis("y", "y"); 
     yAxis.title = "Price" 

     s1 = chart1.addSeries("Series1", dimple.plot.line, [xAxis, yAxis]); 
     s1.data = data1[0] 
     s2 = chart1.addSeries("Series2", dimple.plot.line, [xAxis, yAxis]); 
     s2.data = data1[1] 
     myLegend1 = chart1.addLegend(510, 100,60, 200, "Right"); 
     chart1.draw(); 
    </script> 
</div> 

Answer 1

這實際上比示例中的情況稍微簡單一些，因爲您不必擔心過濾。相反，你可以只創建一個字典，並找到相關的數據集的方式：

var svg1 = dimple.newSvg("#chart1", 600, 500); 
    var data1 = [[{x: '01/31/1998', y: 100.0}, {x: '02/28/1998', y: 110.0}, {x: '03/31/1998', y: 120.0}, {x: '04/30/1998', y: 130.0}], 
       [{x: '01/31/1998', y: 120.0}, {x: '02/28/1998', y: 130.0}, {x: '03/31/1998', y: 140.0}, {x: '04/30/1998', y: 150.0}]] 

    var chart1 = new dimple.chart(svg1); 
    chart1.setBounds(70, 30, 400, 300) 
    var xAxis = chart1.addTimeAxis("x", "x", "%m/%d/%Y", "%b %y"); 
    xAxis.title="Date" 
    var yAxis = chart1.addMeasureAxis("y", "y"); 
    yAxis.title = "Price" 
    var seriesDict = {}; 

    s1 = chart1.addSeries("Series1", dimple.plot.line, [xAxis, yAxis]); 
    s1.data = data1[0] 
    seriesDict["Series1"] = { data: data1[0], series: s1, visible: true }; 

    s2 = chart1.addSeries("Series2", dimple.plot.line, [xAxis, yAxis]); 
    s2.data = data1[1] 
    seriesDict["Series2"] = { data: data1[1], series: s2, visible: true }; 

    myLegend1 = chart1.addLegend(510, 100,60, 200, "Right"); 

    chart1.draw(); 

    chart1.legends = []; 

    myLegend1.shapes.selectAll("rect") 
     // Add a click event to each rectangle 
     .on("click", function (e) { 
     var meta = seriesDict[e.aggField[0]]; 
     if (seriesDict[e.aggField[0]].visible) { 
      meta.series.data = []; 
      d3.select(this).style("opacity", 0.2); 
      seriesDict[e.aggField[0]].visible = false; 
     } else { 
      meta.series.data = meta.data;   
      d3.select(this).style("opacity", 1);  
      seriesDict[e.aggField[0]].visible = true; 
     } 
     chart1.draw(1000); 
    }); 

http://jsbin.com/zadic/2/edit?js,output