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