Transitions styles back to CSS defaults - javascript

I'm working on some D3 visualizations and what I've found is that I'm having to define a lot of styles in my code - that really I'd prefer to have just in my CSS.
The reason for doing this is simply to support transitions. I've found that I can run a transition from a style applied in CSS to an inline one, but then I can't remove that style back to the original. Instead all of them need to be in-line. Like in the following example:
var svg = d3.select("svg");
var c1 = svg.append("circle")
.attr("class", "red")
.attr("r", 25)
.attr("cx", 50)
.attr("cy", 50);
var c2 = svg.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.style("fill", "red");
svg.selectAll("circle")
.transition()
.delay(2000)
.duration(2000)
.style("fill", "blue");
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", "");
c2.transition()
.delay(5000)
.duration(2000)
.style("fill", "red");
.red {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>
The circle on the left jumps straight back to red, while the one on the right transitions back.
What I'd like to do is transition the left circle back, without having to re-define the original colour I'm using from CSS in my Javascript code.
Does anyone know of an elegant way to achieve this?

So using Gilsha's answer I managed to figure out that you can actually grab the original CSS style later on so you don't need to save it. Seems even when the colour is blue, I can go back and grab the red colour:
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", function(d) {
var selection = d3.select(this);
var currentStyle = selection.style("fill");
var defaultStyle = selection.style("fill", null).style("fill");
selection.style("fill", currentStyle");
return defaultStyle;
});
var svg = d3.select("svg");
var c1 = svg.append("circle")
.attr("class", "red")
.attr("r", 25)
.attr("cx", 50)
.attr("cy", 50);
var c2 = svg.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.style("fill", "red");
svg.selectAll("circle")
.transition()
.delay(2000)
.duration(2000)
.style("fill", "blue");
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", function(d) {
var selection = d3.select(this);
var currentStyle = selection.style("fill");
var defaultStyle = selection.style("fill", null).style("fill");
selection.style("fill", currentStyle);
return defaultStyle;
});
c2.transition()
.delay(5000)
.duration(2000)
.style("fill", "red");
.red {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>

Try this code.
var color = c1.style("fill");
var svg = d3.select("svg");
var c1 = svg.append("circle")
.attr("class", "red")
.attr("r", 25)
.attr("cx", 50)
.attr("cy", 50);
var c2 = svg.append("circle")
.attr("r", 25)
.attr("cx", 250)
.attr("cy", 50)
.style("fill", "red");
//Get fill color from css
var color = c1.style("fill");
svg.selectAll("circle")
.transition()
.delay(2000)
.duration(2000)
.style("fill","blue");
c1.transition()
.delay(5000)
.duration(2000)
.style("fill", color);
c2.transition()
.delay(5000)
.duration(2000)
.style("fill", "red");
.red {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
</svg>

Related

d3 line chart v3 upgrade to v4 - transition [duplicate]

Here is my code:
<html>
<head>
<meta charset="UTF-8">
<title>circle</title>
</head>
 
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
    <script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle1.transition()
.duration(1000) //延迟1000ms
.attr("cx", 300);
var circle2 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill", "red");
var circle3 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
circle3.transition()
.duration(2000)
.transition()
.ease("bounce")
.attr("cx", 300)
.style("fill", "red")
.attr("r", 25);
    </script>    
</body>
</html>
When I learn how to use the .ease("bounce")in d3 v4.x, the error is always jump out in html:45. In the official introduction: .ease("bounce") now should be used like this:
d3.easeBounce(t)
but it also doesn't work, so I don't know how to modify it. Could you give me a good introduction? Thanks!
The documentation on transition.ease([value]) tells us, that
The value must be specified as a function.
Therefore, you just need to pass in the easing function d3.easeBounce without actually calling it (note, that there are no parentheses following d3.easeBounce):
circle3.transition()
.duration(2000)
.transition()
.ease(d3.easeBounce) // Pass in the easing function
I agree with Altocumulus's answer, but I try to get rid of one of the middle.transition(), and it will run well.
circle3.transition()
.duration(2000)
.ease(d3.easeBounce)

Find original color of element before mouseover

I have a bubble chart in which I make bubbles in the following way:
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("opacity", 0.3)
.attr("r", 20)
.style("fill", function(d){
if(+d.student_percentile <= 40){
return "red";
}
else if(+d.student_percentile > 40 && +d.student_percentile <= 70){
return "yellow";
}
else{
return "green";
}
})
.attr("cx", function(d) {
return xscale(+d.student_percentile);
})
.attr("cy", function(d) {
return yscale(+d.rank);
})
.on('mouseover', function(d, i) {
d3.select(this)
.transition()
.duration(1000)
.ease(d3.easeBounce)
.attr("r", 32)
.style("fill", "orange")
.style("cursor", "pointer")
.attr("text-anchor", "middle");
texts.filter(function(e) {
return +e.rank === +d.rank;
})
.attr("font-size", "20px");
}
)
.on('mouseout', function(d, i) {
d3.select(this).transition()
.style("opacity", 0.3)
.attr("r", 20)
.style("fill", "blue")
.style("cursor", "default");
texts.filter(function(e) {
return e.rank === d.rank;
})
.transition()
.duration(1000)
.ease(d3.easeBounce)
.attr("font-size", "10px")
});
I have given colors red, yellow, green to the bubbles based on the student percentile. On mouseover, I change the color of bubble to 'orange'. Now the issue is, on mouseout, currently I am making colors of bubbles as 'blue' but I want to assign the same color to them as they had before mouseover, i.e., red/green/yellow. How do I find out what color, the bubbles had?
One way is to obviously check the percentile of student and then give color based on that(like I have initially assigned green/yellow/red colors), but is there any direct way of finding the actual color of bubble?
Thanks in advance!
There are several ways for doing this.
Solution 1:
The most obvious one is declaring a variable...
var previous;
... to which you assign to the colour of the element on the mouseover...
previous = d3.select(this).style("fill");
... and reuse in the mouseout:
d3.select(this).style("fill", previous)
Here is a demo:
var svg = d3.select("svg");
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var previous;
var circles = svg.selectAll(null)
.data(d3.range(5))
.enter()
.append("circle")
.attr("cy", 75)
.attr("cx", function(d, i) {
return 50 + 50 * i
})
.attr("r", 20)
.style("fill", function(d, i) {
return colors(i)
})
.on("mouseover", function() {
previous = d3.select(this).style("fill");
d3.select(this).style("fill", "#222");
}).on("mouseout", function() {
d3.select(this).style("fill", previous)
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
Solution 2:
However, D3 has a nice feature, called local variables. You simply have to define the local...
var local = d3.local();
..., set it on the mouseover:
local.set(this, d3.select(this).style("fill"));
And then, get its value on the mouseout:
d3.select(this).style("fill", local.get(this));
Here is the demo:
var svg = d3.select("svg");
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var local = d3.local();
var circles = svg.selectAll(null)
.data(d3.range(5))
.enter()
.append("circle")
.attr("cy", 75)
.attr("cx", function(d, i) {
return 50 + 50 * i
})
.attr("r", 20)
.style("fill", function(d, i) {
return colors(i)
})
.on("mouseover", function() {
local.set(this, d3.select(this).style("fill"));
d3.select(this).style("fill", "#222");
}).on("mouseout", function() {
d3.select(this).style("fill", local.get(this));
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
Solution 3:
Since DDD (also known as D3) means data-driven documents, you can use the bound datum to get the previous colour.
First, you set it (in my demo, using the colors scale):
.style("fill", function(d, i) {
return d.fill = colors(i);
})
And then you use it in the mouseout. Check the demo:
var svg = d3.select("svg");
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var circles = svg.selectAll(null)
.data(d3.range(5).map(function(d) {
return {
x: d
}
}))
.enter()
.append("circle")
.attr("cy", 75)
.attr("cx", function(d) {
return 50 + 50 * d.x
})
.attr("r", 20)
.style("fill", function(d, i) {
return d.fill = colors(i);
})
.on("mouseover", function() {
d3.select(this).style("fill", "#222");
}).on("mouseout", function(d) {
d3.select(this).style("fill", d.fill);
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
For using this solution #3, the element's datum has to be an object.
PS: drop that bunch of if...else for setting the style of the bubbles. Use a scale instead.

How to display a text when mouseover a cilcle

I have tried a code but it dosent work properly. Can you suggest a method to resolve the error. I am new to Visualization and at the beginning stage of d3.js
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> </script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function() {d3.select(this).append("text").attr("fill","blue").text("fill aliceblue");})
</script>
</body>
</html>
Your are trying to append the text element to the circle, which is not possible.
Create a group element and add your circle and text elements to that group.
Here is an example.
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
var grp = sampleSVG.append("g");
var circle = grp.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50);
circle.on("mouseover", function() {
grp.append("text")
.style("fill", "black")
.attr("x", 32)
.attr("y", 52)
.text("Hello");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz"></div>
As suggested here: https://stackoverflow.com/a/16780756/1023562
Create a tooltip div and attach it to mouseover, mousemove and mouseout events.
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
Working fiddle: https://jsfiddle.net/vc95wcvm/
Note that in this Fiddle I have loaded http://d3js.org/d3.v2.js in the script panel (because Fiddle refuses to load it over http, it requires https), so the code that interests you is at the bottom of script panel.

Toggle button for D3.js

I have a button which draws a line and some dots on that line on a graph. I have a second button which removes the line and the dots. I'm trying to use the same button for both functions.
Im having some difficulty with it. Has anyone seen anything like this before?
Here are my two functions. Thanks in advance!
//Draws line and dots
d3.select(".button1").on("click", function(){
var path = svg.append("path") // Add the valueline path.
.attr("class", "line")
.attr("d", valueline(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "5")
.attr("fill", "black");
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("class", "firstDots")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + "30" * 30)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
//Removes line and dots
d3.select(".button2").on("click", function(){
path.remove();
var removeDot = svg.selectAll(".firstDots")
.remove();
});
});
At first I tried passing the class of the buttons back and forth on each click event, it works for drawing and removing. But only once, so I am not able to draw the line and second time.
You could move the path variable outside the event-handler:
<!DOCTYPE html>
<html>
<head>
<script src='http://d3js.org/d3.v3.min.js'></script>
</head>
<body>
<button>Toggle path</button>
<script>
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 250);
var path;
d3.select('button').on('click', function() {
if ( path ) {
path.remove();
// Remove dots
path = null;
} else {
path = svg.append('path')
.attr('class', 'line')
.attr('d', 'M100,150 Q200,25 300,150 T500,150')
.attr('stroke', 'steelblue')
.attr('stroke-width', '5')
.attr('fill', 'black');
// Add dots etc.
}
});
</script>
</body>
</html>

Attempting to implement a svg:clipPath but end up with almost a blank screen

var w = 725;
var h = 500;
var padding = 20;
var svgcanvas = divElem.append("svg:svg")
.attr("width", w)
.attr("height", h);
The path that I wish to restrict the region to, but the element has disappeared
svgcanvas.append("svg:clipPath")
.attr("id", "clipper")
.attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0")
.attr("transform", "translate(220,400) scale(1, -1)")
.style("stroke-width", 2)
.style("stroke", "steelblue")
.style("fill", "yellow");
Do not wish the line to go beyond this path but the element has disappeared
var myLine = svgcanvas.append("svg:line")
.attr("x1", 40)
.attr("y1", 50)
.attr("x2", 450)
.attr("y2", 150)
.attr("clip-path", "url(#clipper)")
.style("stroke", "rgb(6,120,155)");
Do not wish the Circles to go beyond this path, but element has disappeared
var circle = svgcanvas.selectAll("circle").data(jsoncirclehigh);
circle.enter().append('circle')
.attr('opacity',0)
.attr("cursor","pointer")
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function() {d3.select(this).style("fill", "orange");})
.attr("clip-path", "url(#clipper)")
.attr("cx", function(d) {return d.cx;})
.attr("cy", function(d) {return d.cy;});
Look at this example, I apply a ClipPath and a line with a setInterval:
demo

Categories

Resources