CODEWITHSUNDEEP
d3.js
Sumant
Sumant

Reputation: 964

how to change style for a particular path in partition chart (D3.js)

I Am trying to change the style for particular path, in a Partition Chart. Here is the Link for the code.

here on Button click m calling a function changeStyle(), where m selecting all path & iterating them for getting the path between the given range.

function changeStyle(){
    d3.selectAll('path')
    .each(function(path){
        if(inRange(path)){
            path.style('opacity', 1);
        }
    });
}
function inRange(path){
    if(path.size>7000 && path.size<7500){
        return true;
    }
    return false;
}

Now when range meets criteria i want to add some style to that path like opacity or color. But m getting error Object # has no method 'style' . Here m not sure what is the proper way for doing this. Can any one help to change the style for that particular path?

Upvotes: 1

Views: 303

Answers (3)

Manoj
Manoj

Reputation: 1890

Try this code:

DEMO

function changeStyle(){

d3.selectAll('path')
.each(function(pat,i){
    if(inRange(pat)){
         d3.select(this).style('opacity', 0);
    }
  });
}
function inRange(pat){
    if(pat.size>7000 && pat.size<7500){
        return true;
    }
    return false;
}

Upvotes: 2

meetamit
meetamit

Reputation: 25157

The accepted answer here is not really appropriate. The use of path[0][i] instead of works in this case, but could break in selections with multiple parents. The idiomatic d3 way to manipulate a DOM element from within an each() function is via: d3.select(this). The this object is the <path> element associated with the given datum.

d3.selectAll('path')
  .each(function(pat,i){
    if(inRange(pat)){
      d3.select(this).style('opacity')[0]
    }
  });

See jsFiddle

If you wish to manipulate the element directly, kind of like Manoj suggested, you would use this.style.opacity="0".

Finally, instead of using each, you could use filter:

d3.selectAll('path')
  .filter(inRange)
  .style('opacity', 0)

See Demo

Upvotes: 1

Orab&#238;g
Orab&#238;g

Reputation: 12002

Did you try .attr("opacity", "1") ?

Also, when you want to change style on SVG object, it's always better to affect particular classes and use CSS to customize them as in :

path.attr("class", "in-range");

and in your CSS file :

path.in-range {
  opacity: 1;
}

Upvotes: 0

Related Questions