0

我在 flot ( http://www.flotcharts.org/flot/examples/series-toggle/index.html ) 上关注这个例子，将这个概念应用到 D3.js 上。

我的数据如下所示：

[ { "sourceA" : 28, "sourceB": 25, "sourceC": 20, "date": "29-Apr-13", 
"sourceA" : 15, "sourceB": 23, "sourceC": 54, "date": "29-May-13",
"sourceA" : 23, "sourceB": 43, "sourceC": 23, "date": "29-Jun-13",
}]

我按照上面示例的源代码设置了复选框（“sourceA”、“sourceB”等）。但是，我不知道如何使用“plotAccordingToChoices”函数来操作数据。

即，如果选中了 sourceA 复选框，则该函数应将数据更改为：

[ { "sourceA" : 28, "date": "29-Apr-13", 
"sourceA" : 15, "date": "29-May-13",
"sourceA" : 23, "date": "29-Jun-13",
}]

示例中的示例代码 - http://www.flotcharts.org/flot/examples/series-toggle/index.html

// insert checkboxes 
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append("<br/><input type='checkbox' name='" + key +
            "' checked='checked' id='id" + key + "'></input>" +
            "<label for='id" + key + "'>"
            + val.label + "</label>");
    });

    choiceContainer.find("input").click(plotAccordingToChoices);

    function plotAccordingToChoices() {

        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key]) {
                data.push(datasets[key]);
            }
        });

        if (data.length > 0) {
            $.plot("#placeholder", data, {
                yaxis: {
                    min: 0
                },
                xaxis: {
                    tickDecimals: 0
                }
            });
        }
    }

    plotAccordingToChoices();
4

1 回答 1

1

您的过滤器函数的代码如下所示。

function filter(json, attrName) {
  var newJson = [];
  json.forEach(function(d) {
    newJson.push({ "date": d.date, attrName: d[attrName] });
  });
  return newJson;
}
于 2013-06-24T17:35:57.917 回答