I've got an old d3v3 bubble chart -- it had some animation aspects -- I am trying to upgrade it to a v4
//version 3
https://jsfiddle.net/497tmhu0/
There is always a desire to have some animation for when these bubbles load for the first time.
So here - bubbles are created very small and then they expand in size to their resting size.
// Enter
nodes.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 10)
.style("fill", function (d, i) {
return color(i);
})
.call(force.drag());
// Update
nodes
.transition()
.delay(300)
.duration(1000)
.attr("r", function (d) {
return d.radius * scale;
})
// Exit
nodes.exit()
.transition()
.duration(250)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 1)
.remove();
I was converting the chart but some parts of the force functions are no longer working.
https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048
https://bl.ocks.org/shimizu/e6209de87cdddde38dadbb746feaf3a3
this is the current v4 I have - but the animation and force parts are broken.
//current version 4
https://jsfiddle.net/497tmhu0/2/
June 8th -- bubbles grow in size now -- but force aspects are not working - https://jsfiddle.net/vkoxrtwz/ - need to give the bubbles some force aspects - and if clicked on temporarily change their charge so it ripples through the chart and causes the circles to repel/attract each other slightly
You can just chain your animations after the first enter() method. Draw them small, and then add a transition immediately.
// Enter
nodes.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", 1)
.style("fill", function(d, i) {
return color(i);
})
.transition()
.delay(300)
.duration(1000)
.attr("r", function(d) {
return d.radius * scale;
})
https://jsfiddle.net/vkoxrtwz/
Related
I have followed an example from here https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f to create a similar graph. However, I have one additional column of data that I need to use to create circles that match the color of the line where the radius will be some scaled value of that column entry. So, col 3 has values like 873, 15, 1000, 1563, etc. I have tried to do something like
svg.selectAll('circle').data(data)
.enter().append("circle")
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.close) })
.attr("r", '5')
.attr("fill", "red");
right below the point we add the path (right after adding the value line path in the link), however, obviously this only enters circles for one line. I have to add them for both.
You actually need two circles' selections, one for open and another for close:
svg.selectAll(null).data(data)
.enter().append("circle")
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.close) })
.attr("r", '5')
.attr("fill", "steelblue");
svg.selectAll(null).data(data)
.enter().append("circle")
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.open) })
.attr("r", '5')
.attr("fill", "red");
Here is the resulting code: https://bl.ocks.org/GerardoFurtado/4179c63daf38d85a266fb11f8e8e4c17/3786e4a0594e45e6e9a41df84bae4c6a43a86c6f
I'm having problems positioning my tooltip dots. I'm using an ordinal X scale and i just can't get it to work...not sure if i have to change my data structure or...any insight would be appreciated. I have included a JS FIDDLE link below
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { /* return x(d) ?? */})
.attr("cy", function(d,i) { /* return y(d) ?? */})
JS Fiddle link
If you want to create the tooltip for all the lines you'll need this
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { return x(d.month) })
.attr("cy", function(d,i) { return y(d.undecided) })
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { return x(d.month) })
.attr("cy", function(d,i) { return y(d.yes) })
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { return x(d.month) })
.attr("cy", function(d,i) { return y(d.no) })
OBJECTIVE: append text to each node in a d3 force layout
BUG: text is appended to the object (I think, see console) but not displayed on screen
Here's the jsfiddle.
node.append("svg:text")
.text(function (d) { return d.name; }) // note that this works for
// storing the name as the id, as seen by selecting that element by
// it's ID in the CSS (see red-stroked node)
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
I'd be so grateful for any thoughts.
You can't add svg text to a svg circle. You should first create an svg g object (g stands for group) for each node, and than add a circle and a text for each g element, like in this code:
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g");
var circle = node.append("circle")
.attr("class", "node")
.attr("id", function (d) { return d.name; })
.attr("r", 5)
.style("fill", function (d) {
return color(d.group);
});
var label = node.append("svg:text")
.text(function (d) { return d.name; })
.style("text-anchor", "middle")
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
Of course, tick function should be updated accordingly: (also css a little bit)
circle.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
label.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y - 10;
});
Here is jsfiddle.
Transition Code,
d3.select('chart').select('svg')
.selectAll("circle")
.data(sampleData)
.enter().append('circle')
.each(function (d,i)
{
d3.select(this)
.transition()
.delay(i*50)
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
.attr('r', 4);
});
How can I stop/cancel the scheduled/delayed transactions?
The accepted answer does not work with the most recent version of d3. If you're using d3 v4, you should call .interrupt() on your selection.
As pointed out in the other answer, all you need is to schedule a new transition. However, the whole thing is much easier than what you're doing in your code -- there's no need for the separate .each() function. To schedule the transitions initially, you can simply do
d3.select('chart').select('svg')
.selectAll("circle")
.data(sampleData)
.enter().append('circle')
.transition()
.delay(function(d, i) { return i*50; })
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
.attr('r', 4);
The function to stop all transitions (scheduled and running) is simply
d3.selectAll("circle").transition();
Complete demo here.
Starting a new transition on the element stops any transition that is already running. You can pause/stop a d3 transition by setting a new transition with duration as 0.
function stopCircleTransitions(){
if(startedApplyingTransitions)
d3.select('chart').select('svg')
.selectAll("circle")
.each(function(d,i){
d3.select(this)
.transition()
.duration(0);
});
}
}
If you would like to stop the transition if and only if it is started applying, you can try the code below.
var startedApplyingTransitions = false;
d3.select('chart').select('svg')
.selectAll("circle")
.data(sampleData)
.enter()
.append('circle')
.each(function (d,i){
d3.select(this)
.transition()
.delay(i*50)
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
.attr('r', 4)
.each("end", function(){ //this code will do the trick
startedApplyingTransitions = true;
});
});
I am trying to implement update in Scatterplot with Multiple Series
i guess i need to define key element but not sure how to update series.
svg.selectAll(".series")
//.data(series,function(d) { return Math.random()*35.12})
.data(series,function(d) { return Math.random()*35.12})
.enter().append("g")
.attr("class", "series")
.style("fill", function(d, i) { return z(i); })
.selectAll(".point")
.data(function(d) { return d; })
.enter().append("circle")
.attr("class", "point")
.attr("r", 4.5)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); });
how to update and remove.
thanks for your help