Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace ordinal scales with linear scales #75

Closed
wants to merge 6 commits into from
Closed

Replace ordinal scales with linear scales #75

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bdf5e1d
Convert ordinal scale to linear scale
Oct 25, 2016
41a4a4e
Convert mouse target layout to quantitative scale
Oct 26, 2016
2c3bc09
Fix axis styling and scaling for zooming
Oct 26, 2016
be1b236
Make bandwidth responsive, fix label locations
Oct 26, 2016
100292d
Remove dependence of generated variable
Oct 26, 2016
427b852
Fix axis label placement
Oct 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 37 additions & 18 deletions inst/htmlwidgets/lib/d3heatmapcore/heatmapcore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,25 +388,40 @@ function heatmap(selector, data, options) {
} else if (data.length) {
leaves = data;
}

// Define scale, axis
var scale = d3.scale.ordinal()
.domain(leaves)
.rangeBands([0, rotated ? width : height]);
var scale = d3.scale.linear()
.domain([0, leaves.length])
.range([0, rotated ? width : height]);

var axis = d3.svg.axis()
.scale(scale)
.orient(rotated ? "bottom" : "right")
.outerTickSize(0)
.tickPadding(padding)
.tickValues(leaves);
.tickValues(d3.range(0, leaves.length));

// Create the actual axis
var axisNodes = svg.append("g")
.attr("transform", rotated ? "translate(0," + padding + ")" : "translate(" + padding + ",0)")
.call(axis);

var bandwidth = function() { return Math.abs(scale(2) - scale(1)); };
var fontSize = opts[(rotated ? 'x' : 'y') + 'axis_font_size']
|| Math.min(18, Math.max(9, scale.rangeBand() - (rotated ? 11: 8))) + "px";
axisNodes.selectAll("text").style("font-size", fontSize);
|| Math.min(18, Math.max(9, bandwidth() - (rotated ? 11: 8))) + "px";

axisNodes.selectAll("text")
.data(leaves)
.text(function(d){ return d; })
.attr("transform", function(d, i) {
var x = rotated ? 6 + padding : 6;
var y = rotated ? -(6 + padding) : bandwidth()/2;
var r = rotated ? "rotate(45)," : "";
return r + "translate(" + x + "," + y + ")";
})
.style("font-size", fontSize)
.style("text-anchor", "start");


var mouseTargets = svg.append("g")
.selectAll("g").data(leaves);
Expand All @@ -431,21 +446,15 @@ function heatmap(selector, data, options) {
function layoutMouseTargets(selection) {
selection
.attr("transform", function(d, i) {
var x = rotated ? scale(d) + scale.rangeBand()/2 : 0;
var y = rotated ? padding + 6 : scale(d);
var x = rotated ? scale(i) + bandwidth()/2 : 0;
var y = rotated ? padding + 6 : scale(i);
return "translate(" + x + "," + y + ")";
})
.selectAll("rect")
.attr("height", scale.rangeBand() / (rotated ? 1.414 : 1))
.attr("height", bandwidth() / (rotated ? 1.414 : 1))
.attr("width", rotated ? height * 1.414 * 1.2 : width);
}
layoutMouseTargets(mouseTargets);

if (rotated) {
axisNodes.selectAll("text")
.attr("transform", "rotate(45),translate(6, 0)")
.style("text-anchor", "start");
}

controller.on('highlight.axis-' + (rotated ? 'x' : 'y'), function(hl) {
var ticks = axisNodes.selectAll('.tick');
Expand All @@ -463,12 +472,22 @@ function heatmap(selector, data, options) {
var dim = rotated ? 0 : 1;
//scale.domain(leaves.slice(_.extent[0][dim], _.extent[1][dim]));
var rb = [_.translate[dim], (rotated ? width : height) * _.scale[dim] + _.translate[dim]];
scale.rangeBands(rb);
scale.range(rb);
var tAxisNodes = axisNodes.transition().duration(opts.anim_duration).ease('linear');
tAxisNodes.call(axis);
// Set text-anchor on the non-transitioned node to prevent jumpiness
// in RStudio Viewer pane
axisNodes.selectAll("text").style("text-anchor", "start");
// console.log(bandwidth())
axisNodes.selectAll("text")
.data(leaves)
.text(function (d) {return d;})
.attr("transform", function(d, i) {
var x = rotated ? bandwidth() * 0.707/2 + padding : 6;
var y = rotated ? -(bandwidth() * 0.707/2 + padding) : bandwidth()/2;
var r = rotated ? "rotate(45)," : "";
return r + "translate(" + x + "," + y + ")";
})
.style("text-anchor", "start");
tAxisNodes.selectAll("g")
.style("opacity", function(d, i) {
if (i >= _.extent[0][dim] && i < _.extent[1][dim]) {
Expand Down