Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
d3.chart.base modes post
modes: {
mobile : function() {
// if the chart is less than 480 pixels wide or the
// screen is less than 480px wide
return this.width() <= 480 ||
Modernizr.mq("only all and (max-width: 480px)");
},
}
// define a basic rect chart
d3.chart("BaseChart").extend("RectChart", {
modes : {
mobile : function() {
return this.width() <= 480 ||
Modernizr.mq("only all and (max-width: 480px)");
},
tablet: function() {
var w = this.width();
return (w <= 768 && w >= 481) ||
Modernizr.mq("only all and (min-width: 481px) " +
"and (max-width: 768px)");
},
web: function() {
return (this.width() > 768) ||
Modernizr.mq("only all and (min-width: 769px)");
}
}
});
// add a boxes layer
this.layer("boxes", this.base.append("g"), {
modes: ["web", "tablet"],
dataBind: function(data) {
var chart = this.chart();
// update the x scale domain when
// new data comes in
chart.xScale.domain([
Math.min.apply(null, data),
Math.max.apply(null, data)
]);
return this.selectAll("rect")
.data(data);
},
// insert semi transparent blue rectangles
// of height and width 10.
insert: function() {
var chart = this.chart();
var selection = this.append("rect");
return selection;
}
});
// add a boxes layer
this.layer("boxes", this.base.append("g"), {
// modes, dataBind and insert...
events: {
merge: function() {
var selection = this,
chart = selection.chart(),
mode = chart.mode();
if (mode === "tablet") {
selection.attr("width", 10)
.attr("height", 10);
} else if (mode === "web") {
selection.attr("width", 50)
.attr("height", 50);
}
selection.style("fill", "blue")
.style("opacity", "0.5");
selection.attr("x", function(d) {
return chart.xScale(d);
}).attr("y", chart.height()/2);
}
}
});
@staabm

This comment has been minimized.

Copy link

staabm commented Oct 22, 2013

Typo in 1st file, should start with modes not mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.