Javascript dimple.js/d3.js：如何切换系列

我有下面的代码，在图表上呈现两个系列以及图例。我想做的是，当单击相应的图例项时，我想隐藏/取消隐藏相关的系列行。我不知道该怎么做。我看到了这个示例：。但我不认为它适用于这里，因为这个例子使用了一个系列，当我绘制两条不同的线时

有人知道我怎么解决吗？我可以根据单击的图例项检索序列行吗

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

var svg1=酒窝。新闻VG（“图表1”，600500）；
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图表1=新的酒窝图表（svg1）；
图1.立根（70,30,400,300）
var xAxis=chart1.addTimeAxis（“x”，“x”，“m/%d/%Y”，“b%Y”）；
xAxis.title=“日期”
var yAxis=图表1.添加测量轴（“y”、“y”）；
yAxis.title=“价格”
s1=图表1.addSeries（“系列1”，dimple.plot.line，[xAxis，yAxis]）；
s1.data=data1[0]
s2=图表1.添加系列（“系列2”，酒窝.plot.line，[xAxis，yAxis]）；
s2.data=data1[1]
myLegend1=图表1.添加图例（510100,60200，“右”）；
图1.draw（）；

这实际上比示例中的情况稍微简单，因为您不需要担心过滤问题。相反，您只需创建一个字典并通过以下方式查找相关数据集：

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

---

hmmmdimple.v2.1.0.min.js:2b.\u getOrderedList dimple.v2.1.0.min.js:2b.\u getSeriesOrder dimple.v2.1.0.min.js:2b.plot.line.draw dimple.v2.1.0.min.js:1draw dimple.v2.1.0.min.js:1（匿名函数）100:114（匿名函数）[/code]看起来问题可能在：。改为引用：，它工作正常