过滤json数据并使用过滤数据绘制nvd3图表答案

【问题标题】：filter the json data and draw the nvd3 chart using filtered data过滤json数据并使用过滤数据绘制nvd3图表
【发布时间】：2016-09-15 12:00:59
【问题描述】：

d3.json('http://www.mocky.io/v2/57d14d2f100000cd19208e19', function (error, historicalBarChart) {

(function () {


    nv.addGraph(function() {
    var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .staggerLabels(true)
        //.staggerLabels(historicalBarChart[0].values.length > 8)
        .showValues(true)
        .duration(250)
        .height(300)
        .width(400)
        ;


        var filtered1=historicalBarChart[0].values.filter(function(d) { return d.value > 15;});

    console.log(filtered1); // getting filtered json here

    d3.select('#chart2 svg')
        .datum(filtered1) // doesn't render chart for filtered json
        .transition().duration(500)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;

    });
})();
});

我正在尝试过滤 api 数据中大于 15 的值的数据并绘制图表。但是由于数据不可用，数据没有被过滤并且图表没有呈现。如何过滤数据并显示 nvd3 图表？提前致谢！！

【问题讨论】：

标签： javascript json d3.js charts nvd3.js

【解决方案1】：

您的测试集 (http://www.mocky.io/v2/57d14d2f100000cd19208e19) 不包含带有 label 和 value 键的对象。它包含一个只有一个对象的数组，其中包含一个value 键。

所以你应该使用： var filtered1 = historicalBarChart[0].values.filter(..) 而不仅仅是 historicalBarChart.filter(...)

【讨论】：

json 被过滤.. 并且图表呈现但整个未过滤的 json...
根据您的建议更新了代码...即使过滤了 json，图表也不会呈现...我认为这可能是由于过滤后返回 json 的格式。 . 控制台中还有一个错误“Uncaught TypeError: Cannot read property 'length' of undefined”...

【解决方案2】：

在尝试了很多偶然发现这个解决方案之后，将过滤后的数据放入 nvd3 所需的 json 格式就可以了。这样做的代码如下..

var filters = [{ key: "Cumulative Return", values: filtered1 }]

【讨论】：