Created
April 18, 2016 23:58
-
-
Save Lulkafe/c77a36d5efb603e788b03eb749a4a714 to your computer and use it in GitHub Desktop.
D3 Checkbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Reusable, pure d3 Checkbox */ | |
| function d3CheckBox () { | |
| var size = 20, | |
| x = 0, | |
| y = 0, | |
| rx = 0, | |
| ry = 0, | |
| markStrokeWidth = 3, | |
| boxStrokeWidth = 3, | |
| checked = false, | |
| clickEvent; | |
| function checkBox (selection) { | |
| var g = selection.append("g"), | |
| box = g.append("rect") | |
| .attr("width", size) | |
| .attr("height", size) | |
| .attr("x", x) | |
| .attr("y", y) | |
| .attr("rx", rx) | |
| .attr("ry", ry) | |
| .style({ | |
| "fill-opacity": 0, | |
| "stroke-width": boxStrokeWidth, | |
| "stroke": "black" | |
| }); | |
| //Data to represent the check mark | |
| var coordinates = [ | |
| {x: x + (size / 8), y: y + (size / 3)}, | |
| {x: x + (size / 2.2), y: (y + size) - (size / 4)}, | |
| {x: (x + size) - (size / 8), y: (y + (size / 10))} | |
| ]; | |
| var line = d3.svg.line() | |
| .x(function(d){ return d.x; }) | |
| .y(function(d){ return d.y; }) | |
| .interpolate("basic"); | |
| var mark = g.append("path") | |
| .attr("d", line(coordinates)) | |
| .style({ | |
| "stroke-width" : markStrokeWidth, | |
| "stroke" : "black", | |
| "fill" : "none", | |
| "opacity": (checked)? 1 : 0 | |
| }); | |
| g.on("click", function () { | |
| checked = !checked; | |
| mark.style("opacity", (checked)? 1 : 0); | |
| if(clickEvent) | |
| clickEvent(); | |
| d3.event.stopPropagation(); | |
| }); | |
| } | |
| checkBox.size = function (val) { | |
| size = val; | |
| return checkBox; | |
| } | |
| checkBox.x = function (val) { | |
| x = val; | |
| return checkBox; | |
| } | |
| checkBox.y = function (val) { | |
| y = val; | |
| return checkBox; | |
| } | |
| checkBox.rx = function (val) { | |
| rx = val; | |
| return checkBox; | |
| } | |
| checkBox.ry = function (val) { | |
| ry = val; | |
| return checkBox; | |
| } | |
| checkBox.markStrokeWidth = function (val) { | |
| markStrokeWidth = val; | |
| return checkBox; | |
| } | |
| checkBox.boxStrokeWidth = function (val) { | |
| boxStrokeWidth = val; | |
| return checkBox; | |
| } | |
| checkBox.checked = function (val) { | |
| if(val === undefined) { | |
| return checked; | |
| } else { | |
| checked = val; | |
| return checkBox; | |
| } | |
| } | |
| checkBox.clickEvent = function (val) { | |
| clickEvent = val; | |
| return checkBox; | |
| } | |
| return checkBox; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="d3CheckBox.js"></script> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script> | |
| var svg = d3.select("#vis").append("svg").attr("width", 500).attr("height", 300), | |
| checkBox1 = new d3CheckBox(), | |
| checkBox2 = new d3CheckBox(), | |
| checkBox3 = new d3CheckBox(); | |
| //Just for demonstration | |
| var txt = svg.append("text").attr("x", 10).attr("y", 80).text("Click checkboxes"), | |
| update = function () { | |
| var checked1 = checkBox1.checked(), | |
| checked2 = checkBox2.checked(), | |
| checked3 = checkBox3.checked(); | |
| txt.text(checked1 + ", " + checked2 + ", " + checked3); | |
| }; | |
| //Setting up each check box | |
| checkBox1.size(40).x(10).y(10).markStrokeWidth(10).boxStrokeWidth(4).checked(true).clickEvent(update); | |
| checkBox2.size(30).x(70).y(20).rx(5).ry(5).markStrokeWidth(3).boxStrokeWidth(4).checked(true).clickEvent(update); | |
| checkBox3.x(120).y(30).checked(false).clickEvent(update); | |
| svg.call(checkBox1); | |
| svg.call(checkBox2); | |
| svg.call(checkBox3); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment