Question

我想知道如何迭代dimple图例项并根据描述，操纵渲染矩形的不透明度。

在下面的代码中，我正在绘制两个系列。每个系列的一些元数据存储在seriesDict中，包括系列在初始加载时是否应该可见。我可以很好地完成这项任务，但是我无法弄清楚现在如何获得该系列的相关图例项目，并设置它的不透明度为0.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: false };

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

    chart1.draw();
    chart1.legends = [];
    hideSeries();

    function hideSeries()
    {
        for(var keys in seriesDict)
        {
            sMeta = seriesDict[key];
            if (!sMeta.visible)
            {
                sMeta.series.data = [];
                setOpacityOfRelatedLegendItem(); <!---HOW TO ACCOMPLISH THIS-->
            }
        }
    }

Answer 1

所有图例项目都归入系列名称，因此您可以这样做：

var class = dimple._createClass([key])
myLegend1.shapes
    .selectAll("rect." + class)
        .style("opacity", 0.2);

dimple.js / d3.js：遍历图例项

1 个答案: