Skip to content

Instantly share code, notes, and snippets.

@cowboy cowboy/01.mobile.test.js forked from iros/01.mobile.test.js
Last active Dec 25, 2015

Embed
What would you like to do?
mobile: function() {
return Modernizr.mq("only all and (max-width: 480px)");
}
// define a basic rect chart
d3.chart("BaseChart").extend("RectChart", {
modes: {
mobile: function() {
return Modernizr.mq("only all and (max-width: 480px)");
},
tablet: function() {
return Modernizr.mq("only all and (min-width: 481px) and (max-width: 768px)");
},
web: function() {
return 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 modeData = {
mobile: {???},
tablet: {width: 10, height: 10},
web: {width: 50, height: 50}
};
var mode = chart.mode();
var data = modeData[mode];
var chart = this.chart();
this.attr("width", data.width)
.attr("height", data.height)
.style("fill", "blue")
.style("opacity", "0.5")
.attr("x", chart.xScale)
.attr("y", chart.height() / 2);
}
}
});
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.