操作Javascript数据在D3.js上切换系列

Manipulating Javascript Data to Toggle Series on D3.js

本文关键字：系列 js D3 Javascript 数据 操作      更新时间：2023-09-26

我在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();

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

function filter(json, attrName) {
  var newJson = [];
  json.forEach(function(d) {
    newJson.push({ "date": d.date, attrName: d[attrName] });
  });
  return newJson;
}
相关文章：