CODEWITHSUNDEEP
d3.jsvisualizationdimple.js
mike01010
mike01010

Reputation: 6048

dimple.js/d3.js: iterate over legend items

i would like to know how can i iterate over the dimple legend items and based what the description is, manipulate the opacity of the rendered rectangle.

In the code below, i am plotting two series. Some metadata for each series is stored in seriesDict, including whether the series should be visible on initial load. I can accomplish this task just fine, however i am having trouble figuring out how to now get the associated legend item for that series and set it's opacity to say 0.1 to give a visual indication that that series is currently hidden and can be toggled on.

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

Upvotes: 0

Views: 419

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

All the legend items are classed with the series name so you could get it that way:

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

Upvotes: 1

Related Questions