Question

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图表？在此先感谢!!

Answer 1

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

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

Answer 2

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

var filtered = [{key：＆＃34;累积回报＆＃34;，值：过滤1}]

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

2 个答案: