CODEWITHSUNDEEP
javascriptd3.js
sawyer762
sawyer762

Reputation: 81

Change style in an if statement with D3

i have a legend for a multiline series graph.

What i am trying to do is when the circle in the legend is clicked fill the circle white but leave the outline to show that it is not selected for which i will then change lines in the main graph.

The problem i am having is with the if statement it seems.

Here is the legend code;

(function() {
d3.legend = function(g) {
  g.each(function() {
    var g= d3.select(this),
    items = {},
    svg = d3.select(g.property("nearestViewportElement")),
    legendPadding = g.attr("data-style-padding") || 5,
    lb = g.selectAll(".legend-box").data([true]),
    li = g.selectAll(".legend-items").data([true])

lb.enter().append("rect").classed("legend-box",true)
li.enter().append("g").classed("legend-items",true).attr('type','checkbox')

svg.selectAll("[data-legend]").each(function() {
    var self = d3.select(this)
    items[self.attr("data-legend")] = {
      pos : self.attr("data-legend-pos") || this.getBBox().y,
      color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke") 
    }
  })

items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})

li.selectAll("text")
    .data(items,function(d) { return d.key})
    .call(function(d) { d.enter().append("text")})
    .call(function(d) { d.exit().remove()})
    .attr("y",function(d,i) { return i+"em"})
    .attr("x","1em")
    .text(function(d) { ;return d.key})


li.selectAll("circle")
    .data(items, function(d) { return d.key})
    .call(function(d) { d.enter().append("circle")})
    .call(function(d) { d.exit().remove()})
    .attr("cy",function(d,i) { return i-0.25+"em"})
    .attr("cx",0)
    .attr("r","0.4em")
    .style("fill",function(d) {(d.value.color);return d.value.color})  



       .on("click", function(d) {
        d3.select(this)
        if (this.display != "none") {
            this.style("display", "")
        } else {
        this.style("display", "none")
        }  
        }); 


// Reposition and resize the box
var lbbox = li[0][0].getBBox()  
lb.attr("x",(lbbox.x-legendPadding))
    .attr("y",(lbbox.y-legendPadding))
    .attr("height",(lbbox.height+2*legendPadding))
    .attr("width",(lbbox.width+2*legendPadding))
  })
  return g
}

})()

The trouble im having is with the onclick statement

.on("click", function(d) {
        d3.select(this)
        if (this.display != "none") {
            this.style("display", "")
        } else {
        this.style("display", "none")
        }  
        });

In this i was trying to change the display but im getting this error when i click on the circle

"Property 'style' of object # is not a function"

Any ideas on how i can make this onclick if statement work?

Upvotes: 0

Views: 4732

Answers (2)

jackfrankland
jackfrankland

Reputation: 2062

If you are trying to change the display attribute of an SVG, then you don't need to change the display style, you change the display attribute:

.on("click", function(d) {
    this.display = this.display != "none" ? "none" : "";
 });

The same goes for the visibility attribute, see here for all SVG attributes: MDN

If you are trying to change the style, then check the CSS docs: CSS Display

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109292

You need to d3.select(this) again to use .style(). However, you can also put the condition inside the style expression:

d3.select(this)
  .style("display", this.display != "none" ? "" : "none");

From your question it sounds like you'd want to update the internal state on click as well, so something like

d3.select(this)
  .style("display", this.display = (this.display == "none" ? "" : "none"));

Upvotes: 1

Related Questions