Question

我在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",
}]

我已按照上述示例的源代码设置复选框（＆＃34; sourceA＆＃34;，＆＃34; sourceB＆＃34;等）。但是，我仍然坚持如何使用＆＃34; plotAcordingToChoices＆＃34;来操纵数据。功能。

即，如果选中了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();

Answer 1

过滤器功能的代码如下所示。

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

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

1 个答案: