I can load and display data perfectly once, but any attempt to update seems to fail.
I'm trying to build a map that shows activity. In my data csv I have latitude and logitude and the hour of activity (0-23). I am using this highly useful tutorial on updating D3 with new data. The idea being that I cycle through data by the hour.
I've more-or-less stolen the update function. While the initial call works perfectly, any repeated calls manage to only recolor the already-present data, rather than remove it and add new data. This leads me to believe I am not changing the incoming data.
Is there anything obviously wrong with my update call?
function update(data, x) {
// DATA JOIN
// Join new data to any existing data
var circles = g.selectAll("circle")
.data(data); //, function(d) { return d; });
// UPDATE
// Update old elements as needed.
circles
.style("fill", "green")
.transition()
.duration(750);
// ENTER
// Create new elements
circles.enter().append("circle")
.filter(function(d) { return d.hr == x; })
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 0)
.style("opacity", 0.2)
.style("fill", "blue")
.transition()
.duration(750)
.ease("linear")
.attr("r", function(d) {
return d.radius/2;
});
// EXIT
// Remove old elements
circles.exit()
.style("fill", "red")
.transition()
.duration(1500)
.ease("linear")
.attr("r", 0)
.remove();
}
Run from the command line:
update(csv_data, 1)
update(csv_data, 5)
It seems like you're trying to change the data by the line
filter(function(d) { return d.hr == x; })
but that's only filtering the selection.
What you want to do is filter the data before passing it to your selection which you do with the line
.data(data);
I suggest using Array.filter in the beginning of your update function:
function update(data, x) {
// DATA JOIN
// Join new data to any existing data
// filter the data as per x
data = data.filter(function (d) { return d.hr == x; });
var circles = g.selectAll("circle")
.data(data);
// rest of function
}
Be sure to remove the line where you filter after the append.
Related
I am trying to update my d3 bubble chart with new data getting from the backend. However, it seems that the new data gets added to the chart but the old data points are not removed? What is the issue here?
Here is my function:
function updateGeoData(ds, de) {
console.log("hit 233")
const size = d3.scaleLinear()
.domain([1, 100]) // What's in the data
.range([4, 50]) // Size in pixel
let updateData = $.get("/update_geo_data", {"ds":ds, "de":de});
updateData.done(function (result) {
var circles = svg.selectAll("myCircles").data(result, function(d) { return d; });
circles.attr("class", "update");
circles.enter().append("circle")
.merge(circles)
.attr("cx", d => projection([d.long, d.lat])[0])
.attr("cy", d => projection([d.long, d.lat])[1])
.attr("r", d => size(d.count))
.style("fill", "69b3a2")
.attr("stroke", "#c99614")
.attr("stroke-width", 2)
.attr("fill-opacity", .4);
circles.exit().remove();
});
}
This part right here is your problem:
svg.selectAll("myCircles")
myCircles isn't anything so the selection will always be empty, and you will always only append to it.
svg.selectAll("circle") should work as a selection for you. This will select all the circles currently plotted on and enter, update, remove appropriately.
I have a map with a circle at the center of each country. I apply an animation that updates the circles every 3 seconds, following the general update pattern by Mike Bostock. However, my problem is that I want to apply a transition to old elements that stay in the chart (i.e. are not part of the exit()), but only for those that have a change in a particular attribute (because this attribute defines the color of the circle). I figured that I should store the old value as an attribute in the circle and then just compare this attribute value with the newly assigned value from the updated data.
However, when I use a usual js if clause it only provides me with the first element, which means when this circle's value changes, all other circles will get the transition as well.
How can I check between the old and the new value inside this pattern?
Here is a sample code:
//DATA JOIN
var countryCircles = circleCont.selectAll(".dataCircle")
.data(filData, function(d){ return d.id})
//EXIT OLD CIRCLES THAT ARE NOT INCLUDED IN NEW DATASET
countryCircles.exit()
.transition()
.ease(d3.easeLinear)
.duration(500)
.attr("r",0)
.remove()
//CHECK IF OLD CIRCLES THAT ARE INCLUDED CHANGED THE CRITICAL ATTRIBUTE VALUE (main)
if (countryCircles.attr('main') != countryCircles.data()[0].main) {
countryCircles
.attr("main", function(d) {return d.main})
.attr("id", function(d) {return "circle" + d.id})
.attr("class","dataCircle")
.transition()
.ease(d3.easeLinear)
.duration(500)
.ease(d3.easeLinear)
.attr("r",0)
.transition()
.duration(500)
.ease(d3.easeLinear)
.attr("r",10)
.style("fill", function(d) {
if (d.main === "nodata") {
return "grey"
} else {
return color_data.find(function (y) {
return y.main === d.main;
}).color;
}
})
} else {
countryCircles
.attr("main", function(d) {return d.main})
.attr("id", function(d) {return "circle" + d.id})
.attr("class","dataCircle")
}
//CREATE CIRCLES THAT ARRE NEW IN THE UPDATED DATASET
var newCircle = countryCircles.enter()
.append("circle")
.attr("class","dataCircle")
.attr("cx", getCX)
.attr("cy", getCY)
.attr("id", function(d) {return "circle" + d.id})
.attr("main", function(d) {return d.main})
.style("cursor","crosshair")
.attr("r", 0)
.transition()
.delay(500)
.duration(500)
.ease(d3.easeLinear)
.attr("r",10)
.style("fill", function(d) {
if (d.main === "nodata") {
return "grey"
} else {
return color_data.find(function (y) {
return y.main === d.main;
}).color;
}
})
OK, the solution was somewhat straight forward (and I was blind...).
Instead of having the if statement for a single element, I use the each() function and within there check for a change.
...
//CHECK IF OLD CIRCLES THAT ARE INCLUDED CHANGED THE CRITICAL ATTRIBUTE VALUE (main)
countryCircles.each(function(d) {
if (d3.select(this).attr('main') != d3.select(this).data()[0].main) {
...
I have 4 circles with a radius of 70px upon enter.
function draw_circles(...){
data = get_random_generador_data();
//the data contains the circle coordinates, as well
// as the radius, the text or the fill color.
var circleGroup = svgContainer.selectAll('g').data(data);
//=======
//ENTER
//=======
var circleGroupEnter = circleGroup
.enter()
.append('g')
.attr("id", function(d) { return "group_"+d["ix"]; })
circleGroupEnter
.append("circle")
.attr("cx", function(d) { return d["cx"]; })
.attr("cy", function(d) { return d["cy"]; })
.attr("r", function(d) { return d["rad"]; })
.attr("id", function(d) { return "circle_"+d["ix"]; }) //this is 70
.style("fill", function(d) { return d["fill_color"]; })
;
//=======
//UPDATE
//=======
circleGroup.select("circle")
.attr("cx", function(d) { return d["cx"]; })
.attr("cy", function(d) { return d["cy"]; })
.attr("r", function(d) { return 2.0* d["rad"]; })
.attr("id", function(d) { return "circle_"+d["ix"]; })
.style("fill", function(d) { return d["fill_color"]; })
AFTER ENTER
Now, if the user performs a click in one specific one of them, I change the radius of that one to 1.5*70 and call draw_circles again. This generates a new set of data so the update part will be called.
d3.select('#'+c_id)
.transition()
.duration(duration_till_next)
.attr("r", function(d) { return 1.50* d["rad"]; })
After this I get:
AFTER CLICK
This works as expected. Now, I have a setTimeout and after a couple of seconds, draw_circles gets called again from within itself, getting new data and triggering the update part of the d3 code above.
BUT! on the update part of the code, I change the radius to 140px, as you can see on the line above .attr("r", function(d) { return 2.0* d["rad"]; })
setTimeout(function(){ draw_circles(...);}, 2000);
AFTER UPDATE:
So as you can see, there is one element for which the radius update was not applied. However, all the other properties of the circle were changed, such as the coordinates in the image, the text inside of it or the fill color. Only the radius change is not observed.
Now it cannot be a coincidence that the property I happen to modify ad hoc is the very same one that doesn't get updated, but I cannot understand why.
Any ideas?
EDIT: Ok so the issue is here:
d3.select('#'+c_id)
.transition()
.duration(duration_till_next)
.attr("r", function(d) { return 1.50* d["rad"]; })
setTimeout(function(){ draw_circles(...);}, 2000);
The issue is that duration_till_next is also 2000. So what seems to be happening is that by the time the circles are updated, the circle has not finished transitioning. I would have expected that changing the circle radius is finished first, since it's supposed to be called first.
This makes the problem disappear:
.duration(0.9 * duration_till_next)
but this doesn't
.duration(0.99 * duration_till_next)
So there seems to be some sort of race going on.
Using D3 ver 3.5.5. I am using an example (https://gist.github.com/stepheneb/1182434) as a template: the example code to draw the data looks like this:
var circle = this.vis.select("svg").selectAll("circle")
.data(this.points, function(d) { return d; });
circle.enter().append("circle")
.attr("class", function(d) { return d === self.selected ? "selected" : null; })
.attr("cx", function(d) { return self.x(d.x); })
.attr("cy", function(d) { return self.y(d.y); })
.attr("r", 10.0)
.style("cursor", "ns-resize")
.on("mousedown.drag", self.datapoint_drag())
.on("touchstart.drag", self.datapoint_drag());
circle
.attr("class", function(d) { return d === self.selected ? "selected" : null; })
.attr("cx", function(d) {
return self.x(d.x); })
.attr("cy", function(d) { return self.y(d.y); });
circle.exit().remove();
I think of this as four sections: the first does selectAll("circles") and adds the data. The second tells where the data points are ("cx", "cy") and other attr(), and the third is a bit of mystery to me, because it appears to also set "cx" and "cy", but no other attributes. Finally, we do and exit().remove(), which the documentation says removes any data elements not associated with the data array. I dont see how this is happening in this example. When I set breakpoints into the code, both the "cx" steps get called for each data point in the this.points array.
In my code, I try to do the same steps:
hr_circles = self.graph_gps.svg.selectAll("hr_circles")
.data(self.graph_gps.datay1); // , function(d){return d;}
hr_circles.enter().append("circle")
.style("z-index", 3)
.attr("class", "y1")
.attr("r", 1)
.attr("cx", function (d, i) {
return xScale(d.time)
})
.attr("cy", function (d, i) {
return yScale(d.vy)
})
.on("mouseover",
function (d) {...displays a tooltip...})
.on("mouseout", function (d) {
});
hr_circles.attr("class", "y1")
.attr("cx", function (d, i) {
return xScale(d.time)
})
.attr("cy", function (d, i) {
return yScale(d.vy)
})
hr_circles.exit().remove();
When my graph initially displays, the data appear just fine, properly scaled, etc. When I try to re-scale by dragging on the x-axis (as in the example), the axis rescales itself just fine, and re-scaled data appears on the graph, but the original data is also still there (no longer scaled correctly), making a big mess! How do you erase or make the originally scaled data go away?
Tried to post images, but I guess my reputation is too low. Will send to anyone interested.
//add circles with price data
svgContainer.selectAll("circle")
.data(priceData)
.enter()
.append("svg:circle")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y1(d); })
//add circles with difficulty data
svgContainer.selectAll("circle")
.data(difficultyData)
.enter()
.append("svg:circle")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y2(d); })
In the first half, circles with price data are added along the relevant line in the graph chart. Now I want to do the same with the second half to add circles with different data to a different line. However, the first circles' data are overwritten by the second circles' data, and the second circles never get drawn.
I think I have a gut feeling of what's going on here, but can someone explain what exactly is being done and how to solve the problem?
possible reference:
"The key function also determines the enter and exit selections: the
new data for which there is no corresponding key in the old data
become the enter selection, and the old data for which there is no
corresponding key in the new data become the exit selection. The
remaining data become the default update selection."
First, understand what selectAll(), data(), enter() do from this great post.
The problem is that since circle element already exists by the time we get to the second half, the newly provided data simply overwrites the circles instead of creating new circles. To prevent this from happening, you need to specify a key function in data() function of the second half. Then, the first batch of circles do not get overwritten.
//add circles with price data
svgContainer.selectAll("circle")
.data(priceData)
.enter()
.append("svg:circle")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y1(d); })
//add circles with difficulty data
svgContainer.selectAll("circle")
.data(difficultyData, function(d) { return d; }) // SPECIFY KEY FUNCTION
.enter()
.append("svg:circle")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y2(d); })
you can append the circles in two different groups, something like:
//add circles with price data
svgContainer.append("g")
.attr("id", "pricecircles")
.selectAll("circle")
.data(priceData)
.enter()
.append("svg:circle")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y1(d); })
//add circles with difficulty data
svgContainer.append("g")
.attr("id", "datacircles")
.selectAll("circle")
.data(difficultyData)
.enter()
.append("svg:circle")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y2(d); })
if the circles are in different groups they won't be overwritten
I had the same question as OP. And, I figured out a solution similar to tomtomtom above. In short: Use SVG group element to do what you want to do with different data but the same type of element. More explanation about why SVG group element is so very useful in D3.js and a good example can be found here:
https://www.dashingd3js.com/svg-group-element-and-d3js
My reply here includes a jsfiddle of an example involving 2 different datasets both visualized simultaneously on the same SVG but with different attributes. As seen below, I created two different group elements (circleGroup1 & circleGroup2) that would each deal with different datasets:
var ratData1 = [200, 300, 400, 600];
var ratData2 = [32, 57, 112, 293];
var svg1 = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 400);
var circleGroup1 = svg1.append("g");
var circleGroup2 = svg1.append("g");
circleGroup1.selectAll("circle")
.data(ratData1)
.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 30; })
.attr("r", function(d) { return Math.sqrt(d); });
circleGroup2.selectAll("circle")
.data(ratData2)
.enter()
.append("circle")
.attr("r", function(d, i){
return i*20 + 5;
})
.attr("cy", 100)
.attr("cx", function(d,i){ return i*100 +30;})
.style('fill', 'red')
.style('fill-opacity', '0.3');
What is happening is that you are:
In the FIRST HALF:
getting all circle elements in the svg container. This returns nothing because it is the first time you're calling it so there are no circle elements yet.
then you're joining to data (by index, the default when you do not specify a key function). This puts everything in the priceData dataset in the "enter" section.
Then you draw your circles and everything is happy.
then, In the SECOND SECTION:
You are again selecting generically ALL circle elements, of which there are (priceData.length) elements already existing in the SVG.
You are joining a totally different data set to these elements, again by index because you did not specify a key function. This is putting (priceData.length) elements into the "update section" of the data join, and either:
if priceData.length > difficultyData.length, it is putting (priceData.length - difficulty.length) elements into the "exit section"
if priceData.length < difficultyData.length, it is putting (difficulty.length - priceData.length) elements into the "enter section"
Either way, all of the existing elements from the first "priceData" half are reused and have their __data__ overwritten with the new difficultyData using an index-to-index mapping.
Solution?
I don't think a key function is what you are looking for here. A key function is way to choose a unique field in the data on which to join data instead of index, because index does not care if the data or elements are reordered, etc. I would use this when i want to make sure a single data set is correctly mapped back to itself when i do a selectAll(..).data(..).
The solution I would use for your problem is to group the circles with a style class so that you are creating two totally separate sets of circles for your different data sets. See my change below.
another option is to nest the two groups of circles each in their own "svg:g" element, and set a class or id on that element. Then use that element in your selectAll.. but generally, you need to group them in some way so you can select them by those groupings.
//add circles with price data
svgContainer.selectAll("circle.price")
.data(priceData)
.enter()
.append("svg:circle")
.attr("class", "price")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y2(d); })
//add circles with difficulty data
svgContainer.selectAll("circle.difficulty")
.data(difficultyData)
.enter()
.append("svg:circle")
.attr("class", "difficulty")
.attr("r", 6)
.style("fill", "none")
.style("stroke", "none")
.attr("cx", function(d, i) {
return x(convertDate(dates[i]));
})
.attr("cy", function(d) { return y2(d); })
Using this method, you will always be working with the correct circle elements for the separate datasets. After that, if you have a better unique value in the data than simply using the index, you can also add a custom key function to the two .data(..) calls.