CODEWITHSUNDEEP
d3.jsupdates
Simon Breton
Simon Breton

Reputation: 2876

what's wrong with my label update selection

I've got a bar chart which I update by clicking on the row of an associated table. Everything working perfectly fine except for the label. Here is the following code : 

 var mytext = svg.selectAll(".text").data(filterdata,function(d) { return d.date; }) 
    mytext.enter().append("text")
    mytext.exit().remove()
    mytext
    .attr("class","label")
    .attr("x", (function(d) { return x(d.date)  }  ))
    .attr("y", function(d) { return y(d.articles) + 1; })
    .attr("dy", ".75em")
    .text(function(d) { return d.articles; })
    .style("text-anchor", "start")
    }

The enter selection work fine (every time I click on a new row, new label pop-up) however the old one doesn't disappear. My data set looks something like this :

[{articles: 1
date:Tue Apr 26 2016 00:00:00 GMT-0500 (CDT)
key:"2016-04-26T05:00:00.000Z"
values:1},
{articles:1
date:Thu Apr 28 2016 00:00:00 GMT-0500 (CDT)
key:"2016-04-28T05:00:00.000Z"
values:1},
{articles:2
date:Sun May 08 2016 00:00:00 GMT-0500 (CDT)
key:"2016-05-08T05:00:00.000Z"
values:2},
{etc...}]

Upvotes: 0

Views: 38

Answers (2)

Simon Breton
Simon Breton

Reputation: 2876

Ok I find the solution with the following code 

var mytext = svg.selectAll("text.label").data(filterdata,function(d) { return d.date; })
    mytext.exit().remove()
    mytext.enter().append("text")
    mytext
    .attr("class","label")
    .attr("x", (function(d) { return x(d.date)  }  ))
    .attr("y", function(d) { return y(d.articles) + 1; })
    .attr("dy", ".75em")
    .text(function(d) { return d.articles; })
    .style("text-anchor", "start")
    }

I change the svg.selectAll("text") for svg.selectAll("text.label"). I guess there is something related to attr("class","label") and append("text"). But I don't fully understand it if someone can explain me this :) thanks

Upvotes: 1

torresomar
torresomar

Reputation: 2229

Can you move the exit instruction:

mytext.exit().remove();

Before your enter instruction

mytext.enter().append("text")

Something like this

var mytext = svg.selectAll(".text").data(filterdata,function(d) { return d.date; })
    mytext.exit().remove();
    mytext.enter().append("text");
    mytext
    .attr("class","label")
    .attr("x", (function(d) { return x(d.date)  }  ))
    .attr("y", function(d) { return y(d.articles) + 1; })
    .attr("dy", ".75em")
    .text(function(d) { return d.articles; })
    .style("text-anchor", "start")
    }

Upvotes: 1

Related Questions