I'm trying to put circles on a map every second. This animation consists of 4 circles that are shown once a point is added on the map.
After the first time the animation is not repeated again. I do not know why this happens. When new points are added, the animation does not happen again.
https://plnkr.co/edit/benkcHIINN9DCjvIvtEn?p=preview
var aNumCircles=[1,2,4,5];
function addpoints(){
//add circle on map
var coordenadas=map.latLngToLayerPoint([coordinates[cont].lat,coordinates[cont].long]);
svg.append('circle').attr("cx",coordenadas.x)
.attr("cy", coordenadas.y)
.attr("r", 1)
.style("fill",'red')
.attr("class",'circulo_mapa')
//add animation circles on map
var circle = svg.selectAll("circle").data(aNumCircles).enter().append('circle')
.attr("cx",coordenadas.x)
.attr("cy", coordenadas.y)
.attr("id", cont)
.attr("r", 0)
.style("stroke-width", function(d,i){ return 5 / (i+1) })
.attr("class", 'animation_explosion')
.transition()
.delay(function(d,i){ return Math.pow((i+1), 2.5) * 50 })
.duration(2000)
.ease('quad-in')
.attr("r", 25)
.style("stroke-opacity", 0)
.each("end", function (d,i) {
d3.select(this).remove();
});
cont++;
}
var interval = setInterval(function(){
addpoints();
if(cont==5){
clearInterval(interval);
}
},1000);
The problem is just the first line in this selection:
var circle = svg.selectAll("circle")
.data(aNumCircles)
.enter()
.append("circle")
//etc...
Since there are already circles in the SVG at the second time addpoints() runs, your "enter" selection will be empty.
Instead of that, it should be:
var circle = svg.selectAll(null)
.data(aNumCircles)
.enter()
.append("circle")
//etc...
By using selectAll(null) you can be completely sure that your "enter" selection has all the elements in your data array.
Here is the updated plunker: https://plnkr.co/edit/3u0er01thuj5P8e0XqO6?p=preview
Related
I have a demo here
Its a line bar chart using D3 in an Angular app.
I want the chart to be responsive so when the page is resized the chart width will increase and the height will be stay the same.
I'm doing this by capturing the window resize and then calling the function that draws the chart.
This works for the axis but I cant get the line and points to redraw.
I think it's to do with the way I'm trying to us the update pattern
How can I use the update pattern to redraw this line graph
const that = this;
const valueline = d3.line()
.x(function (d, i) {
return that.x(d.date) + 0.5 * that.x.bandwidth();
})
.y(function (d) {
return that.y(d.value);
});
this.x.domain(data.map((d: any) => d.date));
this.y.domain(d3.extent(data, function (d) {
return d.value
}));
const thisLine = this.chart.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
const totalLength = thisLine.node().getTotalLength();
thisLine.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength);
thisLine.transition()
.duration(1500)
.attr("stroke-dashoffset", 0)
let circle = this.chart.selectAll("line-circle")
.data(data);
circle = circle
.enter()
.append("circle")
.attr("class", "line-circle")
.attr("r", 4)
.attr("cx", function (d) {
return that.x(d.date) + 0.5 * that.x.bandwidth();
})
.attr("cy", function (d) {
return that.y(d.value);
})
circle
.attr("r", 4)
.attr("cx", function (d) {
return that.x(d.date) + 0.5 * that.x.bandwidth();
})
.attr("cy", function (d) {
return that.y(d.value);
})
circle
.exit()
.remove()
You have problems in both circles' selection and the line selection.
The circles' selection:
You're selecting "line-circle". Instead of that, you have to select by class: ".line-circle";
You're reassigning the circle selection:
circle = circle.enter()//etc...
Don't do that, otherwise circle will point to the enter selection, not to the update selection anymore. Just do:
circle.enter()//etc...
The path:
You're appending a new path every time you call the function. Don't do that. Instead, select the existing path and change its d attribute, or append a new path if there is none. Both behaviours can be achieved with this code:
let thisLine = this.chart.selectAll(".line")
.data([data]);
thisLine = thisLine.enter()
.append("path")
.attr("class", "line")
.merge(thisLine)
.attr("d", valueline);
Here is your forked code: https://stackblitz.com/edit/basic-scatter-mt-vvdxqr?file=src/app/bar-chart.ts
My objective is to take a set of points, and move them (.transition.duration()) a few times, in series-like fashion.
Example of code:
d3.csv("X.csv", function(csv) {
// initialize circles at random positions
svg.selectAll("circle")
.data(csv)
.enter()
.append("circle")
.attr("cx", function(d) {
return x(80*Math.random());
})
.attr("cy", function(d) {
return y(500*Math.random());
})
.attr("r", function(d) {
return r(Math.sqrt(10*Math.random()));
})
.style("fill", function(d) {
return color(d.A);
})
.style("opacity", 1.0)
.style("stroke-opacity", 1)
.style("stroke-width", 3)
.style("stroke", function(d) {
return stroke(d.B)
});
// Move #1: moving the marks to their position
svg.selectAll("circle")
.transition().duration(2000)
.attr("cx",function(d) {
return x(+d.C);
})
.attr("cy",function(d) {
return y(+d.D);
})
.attr("r",function(d) {
return r(Math.sqrt(+d.E));
})
.style("opacity", 0.8);
//Move #2: move again to highlight
svg.selectAll("circle")
.transition().duration(2000)
.style("opacity", function(d) {
if (d["A"] == "male") {
return 0.1;
} else if (d["A"] == "female") {
return 0.8;
}
});
}
Problem: Running as is, Move #1 is skipped over.
Failed Attempts: If I comment out Move #2 section, then Move #1 works. If I comment out Move #1 section, then Move #2 works.
Ideas considered: I have Googled .delay, setTimeout(), and other options with .exit() and further data bind steps, but I believe there should be something simpler that exists. I have also tried to follow this SO post, but have a hard time following the "General Update Pattern" examples of the first answer.
Question: How do I get Move #1 and Move #2 to work in succession (with possible further Moves #3, #4, etc.)?
Excellent tutorial here
Idea is delay the second transition by the duration of first transition.
So if you have 3 transitions each of duration 1 sec then, delay the second by 1 sec and third by 2 sec, because we have to wait for both first and second transitions to complete. Hope you get the idea.
var canvas = d3.select('body')
.append("svg")
.attr("width",500)
.attr("height",500);
var addcircle = canvas.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",25);
var circles = d3.select('circle');
// first transition
circles.transition().duration(1000)
.attr("cx",250);
// 2nd
circles.transition().delay(1000)
.duration(1000)
.attr("cy",250)
// 3rd
circles.transition().delay(2000)
.duration(1000)
.attr("cx",50)
// 4th
circles.transition().delay(3000)
.duration(1000)
.attr("cy",50);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I am following this example:
https://bl.ocks.org/mbostock/6123708
the thing I can't understand is how I can possibly add new circles when a button is clicked, for example:
d3.tsv("dots.tsv", dottype, function (error, dots) {
container.append("g")
.attr("class", "dot")
.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
})
.call(drag);
});
function dottype(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
self.addNode = function () {
container.append('g')
.attr('class', 'dot')
.append('circle')
.attr('r', 35)
.attr('cx', (i * 100) + cx)
.attr('cy', (i * 100) + cy)
//.style('fill', 'purple')
.call(drag);
i++;
};
The first part is the same as the example, I then created a function to add a single circle inside the container, the problem is that when I drag the new added circle I can move only the external G element, thus moving every other circle together.
I can't understand why, as the functions are the same (I removed even the style 'fill' to be sure)
You are giving your layout a data in .data(dots) but when you are adding a node in your addNode function, the layout is unaware of this new data. What you want is to add/push the new node data to your data array(dots) and recall the drawing function.
Therefore, you should cut the code under d3.tsv into a function to call it again when you update the data.
I have a map and a matching legend on my website. As the user selects different values from a select list, the map is updated and in the same function, the legend should be updated with new values. As the map actualization works properly, the values of the legend stay the same even in the console are logged the right values if I log the variables.
This is the function that draws the legend:
color_domain = [wert1, wert2, wert3, wert4, wert5];
ext_color_domain = [0, wert1, wert2, wert3, wert4, wert5];
console.log(ext_color_domain);
legend_labels = ["< "+wert1, ""+wert1, ""+wert2, ""+wert3, ""+wert4, "> "+wert5];
color = d3.scale.threshold()
.domain(color_domain)
.range(["#85db46", "#ffe800", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);
var legend = svg.selectAll("g.legend")
.data(ext_color_domain)
.enter().append("g")
.attr("class", "legend");
var ls_w = 20, ls_h = 20;
legend.append("rect")
.attr("x", 20)
.attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function(d, i) { return color(d); })
.style("opacity", 0.7);
legend.append("text")
.attr("x", 50)
.attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
.text(function(d, i){ return legend_labels[i]; });
console.log(legend_labels); //gives the right legend_labels but doesn't display them correctly
};
Sadly even the map is updated with new colors they're colored with the old thresholds. This is the way the map is colored:
svg.append("g")
.attr("class", "id")
.selectAll("path")
.data(topojson.feature(map, map.objects.immoscout).features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) {
return color(rateById[d.id]);
})
This is tough to answer without a complete, working code sample but...
You are not handling the enter, update, exit pattern correctly. You never really update existing elements, you are only re-binding data and entering new ones.
Say you've called your legend function once already, now you have new data and you do:
var legend = svg.selectAll("g.legend")
.data(ext_color_domain)
.enter().append("g")
.attr("class", "legend");
This re-binds the data and computes an enter selection. It says, hey d3, what data elements are new? For those new ones, you then append a g. Further:
legend.append("rect")
.attr("x", 20)
.attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function(d, i) { return color(d); })
.style("opacity", 0.7);
Again, this is operating on those newly entered elements only. The ones that already existed on the page aren't touched at all.
Untested code, but hopefully it points you in the right direction:
// selection of all enter, update, exit
var legend = svg.selectAll("g.legend")
.data(ext_color_domain); //<-- a key function would be awesome here
legend.exit().remove(); //<-- did the data go away? remove the g bound to it
// ok, what data is coming in? create new elements;
var legendEnter = legend.enter().append("g")
.attr("class", "legend");
legendEnter.append("rect");
legendEnter.append("text");
// ok, now handle our updates...
legend.selectAll("rect")
.attr("x", 20)
.attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function(d, i) { return color(d); })
.style("opacity", 0.7);
legend.selectall("text")
...
There's some really great tutorials on this; and it's confusing as hell, but it's the foundation of d3.
An example that helps you get started with updating d3 (d3, v4):
const line = svg.selectAll('line').data(d3Data); // binds things
line.exit().remove(); // removes old data
line.enter()
.append('line') // add new lines for new items on enter
.merge(line) // <--- this will make the updates to the lines
.attr('fill', 'none')
.attr('stroke', 'red');
I'm trying to edit the data of created circles in D3. Below my code is pasted of me creating a lot of circles based on some data from graphData.
Supposed I'd want to re-arrange my circles Y position with a new dataset, by transitioning them to their new destinations. How would perform this task? I've tried using attr.("cy", function(d){return yScale(parseFloat(d))} ) to update my Y-coordinates by adding data(graphData[i], function(d){return d;}) with my new data, but this does not work.
You can take a look at my JSFiddle: http://jsfiddle.net/RBr8h/1/
Instead of the for-loop in the following code I've created circles on 2 ticks of my X-axis. I have 3 sets of data and I've used to of them in the example in the fiddle. I'd like to able to use the 3rd dataset instead of the 2 first ones on both circles.
var circle;
for(var i = 0;i < graphData.length;i++){
circle = SVGbody
.selectAll("circle")
.data(graphData[i], function(d){return d;})
.enter()
.append("circle")
.attr("cx",xScale(0))
.attr("cy", yScale(minAxisY))
.attr("r",4)
.style('opacity', 0)
.transition()
.duration(1000)
.attr("cx", function(d){
return spreadCircles(i);
})
//.attr("cy", function (d, i){ return yScale(i); })
.style('opacity', 1)
.transition()
.duration(1500)
.attr("cy", function(d){return yScale(parseFloat(d))} );
Thank you for your help in advance!
To put some flesh on Lars comment, here is a FIDDLE leveraging the enter/update/exit pattern to help you out. I have altered and simplified your code (and data) just enough to demonstrate the principle.
function updateCircles(dataset,color) {
var circle = SVGbody
.selectAll("circle")
.data(dataset, function(d) { return d; });
circle
.exit()
.transition().duration(750)
.attr("r", 0)
.remove();
circle
.enter()
.append("circle");
circle
.attr("cx",function(d){return xScale(100);})
.attr("cy",function(d){return yScale(parseFloat(d))})
.attr("r",0)
.transition().duration(1500)
.attr("r",5)
.style("fill", color);
};
Update fiddle with data keyed off by index...so, circles just have their position updated.