I have a sample that I converted from version 3 that works as expected until I add the new merge method to it then the data in the chart is wrong.
here is the original sample in version 3:
http://bl.ocks.org/ramdog/805185358382521b77a1
here is the converted sample without the merge,
https://jsfiddle.net/jwaldner/r0ew1ju2/
they look fine, but if I un comment the merge the chart is not the same. Am I using this wrong?
This is the code:
// ENTER
bars
.enter()
.append("rect")
.style("fill", "green")
.attr("width", x.bandwidth())
.attr("x", 0)
.attr("x", function(d) { return x(d.date); })
.attr("y", y(0))
.attr("height", 0)
.style("opacity", 0)
//.merge(bars)
.transition()
.duration(500)
.attr("y", function(d) { return y(d.total); })
.attr("height", function(d) { return height - y(d.total); })
.style("opacity", 1);
Related
I'm trying to make a heatmap where the x and y cell values can remain constant however the "fill" attribute can change based on the data. I tried to do something like this:
var tiles = svg.selectAll('rect')
.data(data.values, function(d) {return d.mt_aa+':'+d.position_aa;})
// set up the enter/update/exit block
tiles.join(
function(enter) {
return enter
.append("rect")
.attr("x", function(d) {return x(d.mt_aa) }) // set x coordinate
.attr("y", function(d) {return y(d.position_aa) }) // set y coordinate
.attr("width", x.bandwidth() ) // set tile width
.attr("height", y.bandwidth() ) // set tile height
.style("fill", function(d) {return myColor(d.score) }) // set tile fill based on viridis pallete
.style("opacity", 0); // set opacity as 0 so elements are added but not visible
},
function(update) {
return update
.transition()
.duration(1000)
.attr("x", function(d) {return x(d.mt_aa) })
.attr("y", function(d) {return y(d.position_aa) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) {return myColor(d.score) })
.style("opacity", 0);
},
function(exit){
return exit
.transition()
.duration(1000)
.style('opacity', 0)
.on('end', function() {
d3.select(this).remove();
});
}
)
.transition()
.duration(1000)
.style("opacity", 1);
This mostly works, transitions appropriately, etc., but only if one or more of the heatmap cells are new. If I pass through data where nothing changes but the fill (d.score) nothing transitions/updates. I suspect this is occurring because nothing is being added or removed and so as far as d3 is concerned nothing needs to be updated and the update block never executes. However I'm unsure how to go about solving this using the join syntax in d3 v5.
Updated with the working answer suggested by #anbnyc
// create tiles with 'rect' elements
var tiles = svg.selectAll('rect') // from our svg select the rectangle elements, important for the enter/update/exit block below
.data(data.values, function(d) {return d.mt_aa+':'+d.position_aa;}) // bind the data to the rect selection
const t = svg.transition()
.duration(1000);
// set up the enter/update/exit block
tiles.join(
enter => enter
.append("rect")
.attr("x", function(d) {return x(d.mt_aa) })
.attr("y", function(d) {return y(d.position_aa) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) {return myColor(d.score) })
.style("opacity", 0)
.call(enter => enter.transition(t)
.style("opacity", 1)),
update => update
.attr("x", function(d) {return x(d.mt_aa) })
.attr("y", function(d) {return y(d.position_aa) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("opacity", 0)
.call(update => update.transition(t)
.style("fill", function(d) {return myColor(d.score) })
.style("opacity", 1)),
exit => exit
.style('opacity', 0)
.call( exit => exit.transition(t)
.remove())
)
Your update function needs to return a selection, but it's currently returning a transition. Use .call to apply a transition to a selection inside join. See examples at https://observablehq.com/#d3/selection-join
I'm working on a modified version of this D3 code for parallel coordinates. I would like to add a background color for the axis labels. I realize I cannot set a background color using CSS styles because this is SVG text, so I tried to append rectangles but to no avail. Here is what I wrote but it's not drawing anything:
d3.selectAll(".label")
.append("rect")
.attr("x", function(d){ return d3.select(this).node().getBBox().x - 5;})
.attr("y", function(d){ return d3.select(this).node().getBBox().y - 5;})
.attr("width", function(d){ return d3.select(this).node().getBBox().width;})
.attr("height", function(d) {return d3.select(this).node().getBBox().height;})
.style("stroke", "black")
.style("fill", "yellow");
What am I doing wrong?
EDIT:
based on comments, I appended to the parent g rather than the text label itself. Now the code looks like this:
// Add an axis and title.
var gsvg= g.append("svg:g")
.attr("class", "axis")
.attr("id", "gsvg")
.each(function(d) { d3.select(this).call(axis.scale(yscale[d])); })
.attr("transform", "translate(0,0)");
d3.selectAll("#gsvg")
.append("rect")
.attr("x", function(d){ return this.parentNode.getBBox().x - 5;})
.attr("y", function(d, i){ return i%2 === 0 ? this.parentNode.getBBox().y - 20: this.parentNode.getBBox().y - 35;})
.attr("width", function(d){ return this.parentNode.getBBox().width;})
.attr("height", function(d) {return 20;})
.style("stroke", "lightgrey")
.style("stroke-width", 2)
.style("fill", function(d){
return self.fcolorMap[d];
})
.style("opacity", 0.5);
gsvg.append("svg:text")
.style("text-anchor", "middle")
.attr("y", function(d,i) { return i%2 == 0 ? -14 : -30 } )
.attr("x",0)
.attr("class", "axis-label")
.text(function(d) {
var s = d.split("|");
return s[s.length-1]; });
The only problem is now I need to figure out how to get the bounding boxes of the labels rather than those of the axes.
I am working on a population pyramid that has an updating function.
http://bricbracs.com/hh/
As you can see the bars expand and contract in a horizontal line when you update it with new data. I want to modify the transition effect so that the bars enter and exit vertically like this:
http://vis.stanford.edu/jheer/d3/pyramid/shift.html
I have been following this tutorial and modifying the code but so far no luck.
https://strongriley.github.io/d3/tutorial/bar-2.html
Here is the code that first draws the bars on loading. (this is the male bar group, the female bar group is the same)
leftBarGroup.selectAll('.bar.left')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar left')
.attr('y', function(d) { return yScale(d.group); })
.attr("width", 0)
.attr("opacity", 0)
.transition()
.duration(500)
.attr('width', function(d) { return xScale(d.male); })
.attr('height', yScale.rangeBand())
.attr("opacity", 1)
And here is the corresponding part of the code in the updating function which changes the bars.
var sel = leftBarGroup.selectAll('.bar.left')
.attr('class', 'bar left')
.data(data)
.data(data, function(d) { return d.male; })
.transition()
.attr('y',0)
.duration(500)
.attr('y', function(d) { return yScale(d.group); })
.attr('height', yScale.rangeBand())
.attr('width', function(d) { return xScale(d.male); })
.attr('height', yScale.rangeBand())
Thanks in advance.
Here's one way to reproduce the effect in your linked example. I offset the bars and then slide them back into place. You then handle the top and bottom bars slightly different.
Note, I only did the slide down on the male side of the pyramid, if you need help going the rest of the way just leave me a comment.
var sel = leftBarGroup.selectAll('.bar.left')
.attr('class', 'bar left')
.data(data)
.data(data, function(d) {
return d.male;
})
// offset y to slide down
.attr('y', function(d){
var self = d3.select(this);
return +self.attr('y') - yScale.rangeBand();
})
.transition()
.duration(500)
// slide it back into place
.attr('y', function(d) {
return yScale(d.group);
})
// and set new width
.attr('width', function(d) {
return xScale(d.male);
});
// for the very top bar
// not only slide it but "fade it in"
leftBarGroup.select(':last-child')
.style('opacity', 0)
.transition()
.duration(500)
.style('opacity', 1)
.attr('y', function(d) {
return yScale(d.group);
});
// append a fake bar on the bottom
// to slide and fade out
leftBarGroup.append('rect')
.attr('y', function(d) {
return yScale('0-4');
})
.attr('height', yScale.rangeBand())
.attr('width', function(){
return leftBarGroup.select(':first-child').attr('width');
})
.style('fill', 'steelblue')
.style('opacity', 0.6)
.transition()
.duration(500)
.attr('y', function(d) {
return yScale('0-4') + yScale.rangeBand();
})
.style('opacity', 0)
.remove();
EDITS
Going up is just a matter of reversing the logic:
var sel = leftBarGroup.selectAll('.bar.left')
.attr('class', 'bar left')
.data(data)
.data(data, function(d) {
return d.male;
})
// offset y to slide up
.attr('y', function(d){
var self = d3.select(this);
return +self.attr('y') + yScale.rangeBand()
})
.transition()
.duration(500)
// slide it back into place
.attr('y', function(d) {
return yScale(d.group);
})
// and set new width
.attr('width', function(d) {
return xScale(d.male);
});
// for the very bottom bar
// not only slide it but "fade it in"
leftBarGroup.select(':first-child')
.style('opacity', 0)
.transition()
.duration(500)
.style('opacity', 1)
.attr('y', function(d) {
return yScale(d.group);
});
// append a fake bar on the top
// to slide and fade out
var w = leftBarGroup.select(':last-child').attr('width');
leftBarGroup.append('rect')
.attr('class','fake')
.attr('y', function(d) {
return yScale('90+');
})
.attr('height', yScale.rangeBand())
.attr('width', w)
.style('fill', 'steelblue')
.style('opacity', 0.6)
.transition()
.duration(500)
.attr('y', function(d) {
return yScale('90+') - yScale.rangeBand();
})
.style('opacity', 0)
.remove();
Updated code sample here.
My goal here is to translate a group of svg elements with a translation. It is not working. Here is the code:
Create an SVG container
// create svg container
canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height);
Append a translation of x=200, y=200
// apply a transform
canvas.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
Add a box
// render a background
canvas.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
Add a y-axis
// render y-axis
canvas.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
The box + y-axis line never translates. For a sanity check I applied the translation direction to the box and it did translate. Sigh.
I am assuming the group translation implies a local coordinate system within with x = y = 0 would be the origin of the translated coordinate frame. No? What am I missing here?
The problem is, that the .append() function does not change the selection that it is called on, but returns a new selection.
Therefore the g element gets appended to the svg and the rect gets also appended to the svg and not inside the translated g element. You should see this if you inspect the svg output.
There are two possible solutions:
1: If you want to translate everything, append the g element in the first statement like so:
var canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
canvas.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
canvas.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
2: If you want to append something outside of the translated group,
assign the groupselection to a new variable like so:
var canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height);
var canvasGroup = canvas.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
canvasGroup.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
canvasGroup.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
I'm relatively new to D3 and trying to add labels to a bar chart.. I keep running into the problem of labels applying all values to each label. Precedding this code is normal data load etc.
// Controls Bar Layout and Offset (x(d.weekOf)+20)
var property = svg.selectAll(".property")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + (x(d.weekOf)+20) + ",0)"; });
// Theese are the bars, width is the width of the bars
property.selectAll("rect")
.data(function(d) { return d.emissions; })
.enter().append("rect")
.attr("width", "80")
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.attr("opacity", "0.7")
.style("fill", function(d) { return color(d.name); });
// Add Capacity Labels
property.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d, i) {return d.Internal; })
.attr("x", 41)
.attr("y", 210)
.attr("text-anchor", "middle");
Clearly I'm missing something simple..?
Your labels are a subselection of the property selection, so instead of using data() to join each property label to the entire dataset as you are, you should instead use data to join to the corresponding parent datum, like so:
property.selectAll("text")
.data(function(d) {return [d];})
.enter()
.append("text")
.text(function(d, i) {return d.Internal; })
.attr("x", 41)
.attr("y", 210)
.attr("text-anchor", "middle");