d3.js / javascript efficient code

Question

The following filter is the same, but it result applied for two different element:

mNode.filter(function(otherNode) {
    return connectedNodes.indexOf(otherNode.id) > -1
}).select("image").style("opacity", BACKGROUND_OPACITY);

mNode.filter(function (otherNode) {
    return connectedNodes.indexOf(otherNode.id) > -1;
}).select("circle").style("stroke", "#f6f6f6");

how can I combine it to one filter without duplicate the code?

second, is there a way to apply to opposite more efficient?

mNode.filter(function(otherNode) {
     return connectedNodes.indexOf(otherNode.id) > -1
}).select("image").style("opacity", BACKGROUND_OPACITY);
mNode.filter(function(otherNode) {
      return connectedNodes.indexOf(otherNode.id) == -1
}).select("image").style("opacity", DEFAULT_OPACITY);

Like if the condition is satisfied apply 1st style otherwise apply the 2nd style.

Thanks!

Use for to iterate over mNode, inside it, use if...else and apply styles. — Tushar
– Tushar, Commented Dec 21, 2017 at 6:41
@Tushar that mNode is not an array and that filter is not Array.prototype.filter, that's a different method with the same name (that's confusing, I know...). So, the for won't work here. — Gerardo Furtado
– Gerardo Furtado, Commented Dec 21, 2017 at 7:58

Gerardo Furtado · Accepted Answer · 2017-12-21 12:25:19Z

1

Answering your first question: just use a selection:

var filtered = mNode.filter(function(otherNode) {
    return connectedNodes.indexOf(otherNode.id) > -1
});

And then:

filtered.select("image").style("opacity", BACKGROUND_OPACITY);
filtered.select("circle").style("stroke", "#f6f6f6");

Your second question is a bit more complicated, and has different solutions. I'd use an each to check every node. Something like:

mNode.each(function(d) {
  if (connectedNodes.indexOf(d.id) > -1) {
    d3.select(this).select("image").style("opacity", BACKGROUND_OPACITY);
  } else {
    d3.select(this).select("image").style("opacity", DEFAULT_OPACITY);
  }
})

However, I'd say that, intuitively, your code is faster than the each. You can always test both solutions using tools like jsPerf.

edited Dec 21, 2017 at 12:25

answered Dec 21, 2017 at 7:34

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ItayB Over a year ago

I'm trying to work with 'each', but then I don't know how to apply the style on the node (from it's id)

Gerardo Furtado Over a year ago

It is d3.select(this).style(etc...)

Collectives™ on Stack Overflow

d3.js / javascript efficient code

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related