Changing direction of D3 animation / transition?
Question
I've recently built a small heatmap whose individual cells appear through a fade-in one after another after the page is loaded:
https://codepen.io/ChrisBean/pen/KKwpmjb
The fade-in animation is triggered by setting the initial opacity value of the cells to 0
squares.transition()
.duration(1000)
.delay((_d, i) => i * 200)
.style('opacity', 1);
As of now, the cells fade in from the bottom to the top column by column . I want them to fade in from left to right, row by row. This is the succession that I'm aiming at, quickly visualized with a pen drawing on a thinkpad:
Can anyone push me in the right direction of what to change in the transition trigger to change the direction?
1 answers
solution1
2 ACCPTED 2019-12-05 11:24:14
There is no such a thing as the "direction of a transition" in D3. The whole issue here is that you're using the indices of the elements to set the delay. That being said, just change the order of the objects inside the data array, so the indices match the direction you want.
For instance:
data.sort(function(a,b){
return myVars.indexOf(b.variable) - myVars.indexOf(a.variable) ||
myGroups.indexOf(a.group) - myGroups.indexOf(b.group)
});
Here is the code with that change:
// set the dimensions and margins of the graph const margin = { top: 0, right: 0, bottom: 0, left: 0, }; const width = 400 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page // eslint-disable-next-line no-undef const svg = d3.select('#my_dataviz') .append('svg') .attr('viewBox', '0 0 900 320') .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // Labels of row and columns const myGroups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; const myVars = ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10']; // Build X scales and axis: const x = d3.scaleBand() .range([0, width]) .domain(myGroups) .padding(0.00); svg.append('g') .attr('transform', `translate(0,${height})`) .call(d3.axisBottom(x)); // Build X scales and axis: const y = d3.scaleBand() .range([height, 0]) .domain(myVars) .padding(0.00); svg.append('g') .call(d3.axisLeft(y)); // Build color scale const myColor = d3.scaleLinear() .range(['white', '#363636']) .domain([1, 100]); // Read the data d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv', (data) => { data.sort(function(a, b) { return myVars.indexOf(b.variable) - myVars.indexOf(a.variable) || myGroups.indexOf(a.group) - myGroups.indexOf(b.group) }); // create a tooltip const tooltip = d3.select('#my_dataviz') .append('div') .style('opacity', 0) .attr('class', 'tooltip') .style('background-color', 'white') .style('border', 'solid') .style('border-width', '2px') .style('border-radius', '5px') .style('padding', '5px'); // Three function that change the tooltip when user hover / move / leave a cell const mouseover = function() { tooltip.style('opacity', 1); }; const mousemove = function(d) { tooltip .html(`Client Branch:${d.value} <br> Project: <br>`) .style('left', `${d3.mouse(this)[0] + 70}px`) .style('top', `${d3.mouse(this)[1]}px`); }; const mouseleave = function() { tooltip.style('opacity', 0); }; // add the squares const squares = svg.selectAll() .data(data, (d) => `${d.group}:${d.variable}`) .enter() .append('rect') .attr('x', (d) => x(d.group)) .attr('y', (d) => y(d.variable)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .style('fill', (d) => myColor(d.value)) .style('opacity', 0) .on('mouseover', mouseover) .on('mousemove', mousemove) .on('mouseleave', mouseleave); squares.transition() .duration(1000) .delay((_d, i) => i * 200) .style('opacity', 1); });
<!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js"></script> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.