Created
July 1, 2014 09:43
-
-
Save chitacan/27721d2be5574f4f0c79 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <style type="text/css"> | |
| svg { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .join, | |
| .link, | |
| .node rect { | |
| fill: none; | |
| stroke: #636363; | |
| stroke-width: 1.5px; | |
| } | |
| .link { | |
| stroke: #969696; | |
| } | |
| .node rect { | |
| fill: white; | |
| } | |
| .link path, | |
| .node rect, | |
| .node text, | |
| .join { | |
| -webkit-transition: all 500ms linear; | |
| -moz-transition: all 500ms linear; | |
| -ms-transition: all 500ms linear; | |
| -o-transition: all 500ms linear; | |
| transition: all 500ms linear; | |
| } | |
| .node .element rect { | |
| fill: #bdbdbd; | |
| stroke: none; | |
| } | |
| .node .null rect { | |
| fill: none; | |
| stroke: none; | |
| } | |
| .node .null text { | |
| fill: #636363; | |
| } | |
| .node .selection rect { | |
| stroke: #e6550d; | |
| } | |
| .node .data rect { | |
| stroke: #3182bd; | |
| } | |
| .node .datum rect { | |
| fill: #d9d9d9; | |
| stroke: none; | |
| } | |
| .node .code text { | |
| font-family: monospace; | |
| } | |
| .node .key rect { | |
| fill: #a1d99b; | |
| stroke: none; | |
| } | |
| .link .to-key, | |
| .join { | |
| stroke: #a1d99b; | |
| } | |
| .join { | |
| stroke-dasharray: 2,2; | |
| } | |
| .link .to-null { | |
| stroke-dasharray: .5,3.5; | |
| stroke-linecap: round; | |
| } | |
| .link .from-data { | |
| stroke: #3182bd; | |
| } | |
| .play circle { | |
| fill: #fff; | |
| stroke: #000; | |
| stroke-width: 3px; | |
| } | |
| .play:hover path { | |
| fill: #f00; | |
| } | |
| .play.mousedown circle { | |
| fill: #f00; | |
| } | |
| .play.mousedown path { | |
| fill: #fff; | |
| } | |
| .play rect { | |
| fill: none; | |
| pointer-events: all; | |
| cursor: pointer; | |
| } | |
| code span { | |
| -webkit-transition: background 250ms linear; | |
| -moz-transition: background 250ms linear; | |
| -ms-transition: background 250ms linear; | |
| -o-transition: background 250ms linear; | |
| transition: background 250ms linear; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js" type="text/javascript"></script> | |
| <script src="index.js" type="text/javascript"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| var margin = {top: 0, right: 40, bottom: 0, left: 40} | |
| , width = 720 | |
| , step = 100; | |
| function tree(leftRoot, rightRoot, outerHeight) { | |
| if (arguments.length < 3) outerHeight = rightRoot, rightRoot = null; | |
| var height = outerHeight - margin.top - margin.bottom; | |
| var tree = d3.layout.tree() | |
| .size([height, 1]) | |
| .separation(function() { return 1; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .style("margin", "1em 0 1em " + -margin.left + "px"); | |
| var g = svg.selectAll("g") | |
| .data([].concat( | |
| leftRoot ? {type: "left", nodes: tree.nodes(leftRoot)} : [], | |
| rightRoot ? {type: "right", nodes: tree.nodes(rightRoot).map(flip), flipped: true} : [] | |
| )) | |
| .enter().append("g") | |
| .attr("class", function(d) { return d.type; }) | |
| .attr("transform", function(d) { return "translate(" + (!!d.flipped * width + margin.left) + "," + margin.top + ")"; }); | |
| var link = g.append("g") | |
| .attr("class", "link") | |
| .selectAll("path") | |
| .data(function(d) { return tree.links(d.nodes); }) | |
| .enter().append("path") | |
| .attr("class", linkType); | |
| var node = g.append("g") | |
| .attr("class", "node") | |
| .selectAll("g") | |
| .data(function(d) { return d.nodes; }) | |
| .enter().append("g") | |
| .attr("class", function(d) { return d.type; }); | |
| node.append("rect"); | |
| node.append("text") | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.name; }) | |
| .each(function(d) { d.width = Math.max(32, this.getComputedTextLength() + 12); }) | |
| .attr("x", function(d) { return d.flipped ? 6 - d.width : 6; }); | |
| node.filter(function(d) { return "join" in d; }).insert("path", "text") | |
| .attr("class", "join"); | |
| svg.call(reset); | |
| function flip(d) { | |
| d.depth *= -1; | |
| d.flipped = true; | |
| return d; | |
| } | |
| return svg; | |
| } | |
| function linkType(d) { | |
| return d.target.type.split(/\s+/).map(function(t) { return "to-" + t; }) | |
| .concat(d.source.type.split(/\s+/).map(function(t) { return "from-" + t; })) | |
| .join(" "); | |
| } | |
| function reset(svg) { | |
| svg.selectAll("*") | |
| .style("stroke-opacity", null) | |
| .style("fill-opacity", null) | |
| .style("display", null); | |
| var node = svg.selectAll(".node g") | |
| .attr("class", function(d) { return d.type; }) | |
| .attr("transform", function(d, i) { return "translate(" + d.depth * step + "," + d.x + ")"; }); | |
| node.select("rect") | |
| .attr("ry", 6) | |
| .attr("rx", 6) | |
| .attr("y", -10) | |
| .attr("height", 20) | |
| .attr("width", function(d) { return d.width; }) | |
| .filter(function(d) { return d.flipped; }) | |
| .attr("x", function(d) { return -d.width; }); | |
| //node.select(".join") | |
| //.attr("d", d3.svg.diagonal() | |
| // .source(function(d) { return {y: d.width, x: 0}; }) | |
| // .target(function(d) { return {y: 88, x: d.join * 24}; }) | |
| // .projection(function(d) { return [d.y, d.x]; })); | |
| node.select('.join') | |
| .attr('d', function(d) { | |
| //var sx = d.source.x, sy = d.source.y, | |
| //tx = d.target.x, ty = d.target.y, | |
| var sx = d.width | |
| , sy = 0 | |
| , tx = d.width | |
| , ty = d.join * 24 | |
| dx = tx - sx, dy = ty - sy, | |
| dr = 0.3 * Math.sqrt(dx * dx + dy * dy); | |
| return "M" + sx + "," + sy + "A" + dr + "," + dr + " 0 0,1 " + tx + "," + ty; | |
| }); | |
| svg.selectAll(".link path") | |
| .attr("class", linkType) | |
| .attr("d", d3.svg.diagonal() | |
| .source(function(d) { return {y: d.source.depth * step + (d.source.flipped ? -1 : +1) * d.source.width, x: d.source.x}; }) | |
| .target(function(d) { return {y: d.target.depth * step, x: d.target.x}; }) | |
| .projection(function(d) { return [d.y, d.x]; }) | |
| ); | |
| } | |
| tree( | |
| {type: "selection", name: "selection", children: [ | |
| {type: "array", name: "group", children: [ | |
| {type: "element", name: "element", children: [{type: "key", name: "B", join: 1}]}, | |
| {type: "element", name: "element", children: [{type: "key", name: "A", join: -1}]}, | |
| {type: "element", name: "element", children: [{type: "key", name: "D", join: 1}]}, | |
| {type: "element", name: "element", children: [{type: "key", name: "C", join: -1}]}, | |
| {type: "element", name: "element", children: [{type: "key", name: "E", join: 0}]} | |
| ]} | |
| ]}, | |
| {type: "data", name: "data", children: [ | |
| {type: "array", name: "array", children: [ | |
| {type: "code datum", name: "{name: \"A\"}", children: [{type: "key", name: "A"}]}, | |
| {type: "code datum", name: "{name: \"B\"}", children: [{type: "key", name: "B"}]}, | |
| {type: "code datum", name: "{name: \"C\"}", children: [{type: "key", name: "C"}]}, | |
| {type: "code datum", name: "{name: \"D\"}", children: [{type: "key", name: "D"}]}, | |
| {type: "code datum", name: "{name: \"E\"}", children: [{type: "key", name: "E"}]} | |
| ]} | |
| ]}, | |
| 24 * 5 | |
| ); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment