CODEWITHSUNDEEP
d3.js
user2024080
user2024080

Reputation: 5101

d3js - how to filter the array with values and pass in to data?

I am getting data from backend, where some of the values are 0. I don't want to create the circle for those values.

I understand, I need to use a filter, but I don't have any idea how to use that.

Here is my code:

var circles = city.selectAll("circle")
                        .data(function(d) {
                          return d.values //this is a array length 20 how to filter that? i need only with values more than 0
                        })
                        .enter()
                        .append("circle")
                        .attr("r", 3.5)
                        .attr("cx", function(d, i) {
                          return x(d.date)
                        })
                        .attr("cy", function(d) {
                          return y(d.temperature)
                        })
                        .style('cursor', 'pointer')
                        .attr("fill", "transparent")
                        .attr("stroke", "yellow")
                        .attr("stroke-width", 0);

Upvotes: 0

Views: 6062

Answers (2)

Harry Vane
Harry Vane

Reputation: 368

Firstly, I'm assuming that you meant something more like .data(dataFromBackend, function (d) { return d.values; }), otherwise there's no bind!

Anyway, to do what you're describing, and making the assumption that you're not bothered about having the 0-values in the bind at all, you can simply do:

filteredData = backendData.filter(function (d) {
    return d.value != 0;
});

There's a detailed reference for .filter here, but briefly, the function passed to .filter is called for every element in backendData, with each element referred to by d in the usual way. The return value should be boolean (true or false), but will work with anything, using 'truthiness'. Any element the function returns something 'truthy' for will be included in the final array (filteredData in my example), any element the function returned something 'falsey' will not.

Upvotes: -1

altocumulus
altocumulus

Reputation: 21578

If d.values is an array you can use Array.prototype.filter() to extract all values different from 0 from it. The following will bind only non-zero values and create circles only for these:

.data(function(d) {
    return d.values.filter(function(v) { return v != 0; });
})

Upvotes: 2

Related Questions