Removing old text labels when bar chart is updated - javascript

I am trying to build a D3 bar chart visualization that can be updated using a drop down menu.
So far, I have successfully created the bar chart and the drop down menu such that when I change the selection in the menu, the bars are updated to their new values.
However, I am having problems with the bar labels updating appropriately. Even though I include the same .exit.remove() function for the labels as for the bars, the old labels remain on the newly updated chart.
Image of the updated chart w/ problem labels
Test csv file
Test code
Apologies for the links. I'm new to JSFiddle, and I couldn't figure out how to easily transfer my example.

You forgot to add class attribute while appending the text
You also need to change the text while updating
Hope this helps
bartexts.transition().duration(250)
.attr("y", function(d, i) {return yScale(d) - 10})
.text(function(d) {return d});

Related

D3 - Removing elements (div) on update

I currently have a chart with 2 viewing options (regular data and percentages).
I also have a tooltip that shows the results for each line that I'm showing
When I switch options I want my tooltip to keep showing the info (the lines are getting drawn correctly) but instead what I'm seeing is that I'm creating several tooltip boxes for each time I switch options.
My tooltip is an append('g') to my main chart and I'm appending my tooltip box to this tooltip which is appended to my chart which is chartContent
Here's the tooltip box
const tooltipContainer = d3.select(".stackedChart").append("div")
.attr("class", css.divBox)
.style("opacity", 0);
tooltip.append("tooltipContainer")
On update (aka when switching options) I'm already doing this
chartContent.remove()
chartContent = chart.append('g') (to get the new info)
Now for my .divBox I was trying d3.selectAll(".divBox").remove(); but I can't seem to get it to work.
Every time I switch options I get one more .divBoxand I can see the bottom one updating with the info but the one following the tooltip is the top one (I think, I might be wrong).
What are my steps from here? I'm extremely confused

Refresh one chart according to the action in another chart in d3.js V4

I have two d3 charts in separate divs on a single page. After clicking on bar, the line chart should update accordingly for e.g. the click action on specific bar, should add an appropriate line to a line chart in another div. I am able to create a click action on bar. How can I use this action from bar chart to update a line chart accordingly. Here is my plunker code.
bar_svg.selectAll("#bar_chart")
.data(TOP_TEN_CHANNELS)
.enter().append("rect")
.on("click", function (d){
console.log("inside_bar_fucntion "+ d.channel);
})

D3 highlight corresponding table entry when hovering over donut chart slice

I started working with D3 and had a little help yesterday getting some code to work. I have one new quick question. I have a donut chart representing some soon to be JSON object. When you hover over some of the pieces of the chart, they animate and pop out. There is a corresponding table that is populated by the same object. I was able to get the data in the table mapped out so that when you hover over the data, it animates the corresponding pie chart slice. I'm trying to get it to work in the opposite way as well, so that when you hover over the donut slice, it highlights the table.
Currently, I have it highlighting the entire table, but I can't seem to figure out how to map it to the individual and correct table entry.
Fiddle for context
My arc mouseover, where I currently have it highlighting everything,
.on("mouseover", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arcOver);
var path = paths[0][i];
d3.selectAll("#testtable .dataRow")
.style("background-color","red");
Can someone provide a little help on how to map to the correct table entry?
Thank you!
Since your pie chart and table are ordered the same, you can do it by index:
.on("mouseover", function(d,i) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arcOver);
var row = d3.selectAll("#testtable .dataRow")[0][i]; // i is the index
d3.select(row)
.style("background-color","red");
})
Updated fiddle.

how to update text added in dimple.js stacked bar chart on data updation

I have added text on my bar char as shown here
but the problem in when my data gets updated it overwrite my text everytime, previous text remains as it is there.
I would like to know how can I remove text everytime new data has arrived.
see the darkness of text, it is getting overwritten everytime new data is loading.
You need to move the drawing logic to the series.afterDraw method as shown here: http://dimplejs.org/adhoc_viewer.html?id=adhoc_bar_labels
Then simply class the new labels:
svg.append("text")
.attr("class", dimple._createClass(data.yField))
.attr("x", ...
And remove them at the start of the afterDraw method:
svg.selectAll("text." + dimple._createClass(data.yField)).remove();

d3.js force directed graph search

I am trying to implement a search function on a d3 force directed graph example.
When I type in the search query in the text field, relevant items will be shown and the irrelevant ones will fade out.
I have implemented the methods searchUpdate and count as shown in the following jsfiddle.
I need some help to fade the items. Currently d3.select("svg") fades the whole graph, while d3.select("#"+n.id) produces an error.
When you d3.select("svg") you're selecting the SVG canvas and setting its opacity. What you want to do is
d3.selectAll("circle")
or
d3.selectAll("circle.node")
and apply the opacity there.
Then what you want to do is select the circles that match by ID using d3.select("#"+n.id) but to do so you'll have to create an id when you create the circles, like
.attr("id", function(d,i) {return "circle"+i})
Otherwise you don't have an id to select with.

Categories

Resources