Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <head>
- <title>edw overview</title>
- </head>
- <style>
- .node {
- font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
- fill: #bbb;
- }
- .node:hover {
- fill: #000;
- }
- .node--empty{
- fill: #000;
- font-weight: 700;
- }
- .link {
- stroke: steelblue;
- stroke-opacity: .01;
- fill: none;
- /* pointer-events: none;*/
- }
- .node:hover,
- .node--target {
- font-weight: 700;
- }
- .node--source {
- fill: #bbb;
- }
- .node--target {
- fill: purple;
- }
- .link--source,
- .link--target {
- stroke-opacity: 0.1;
- stroke-width: 2px;
- }
- .link--source {
- /* stroke: #d62728;
- */
- stroke: Navy;
- }
- .link--empty {
- stroke-opacity: 0;
- }
- .link--target {
- /* stroke: #2ca02c;*/
- stroke: Navy;
- }
- </style>
- <body>
- <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
- <script src="//d3js.org/topojson.v1.min.js"></script>
- <script>
- var diameter = 960,
- radius = diameter / 2,
- innerRadius = radius - 120;
- var cluster = d3.layout.cluster()
- .size([360, innerRadius])
- .sort(null)
- .value(function(d) { return d.size; });
- var bundle = d3.layout.bundle();
- var margin = {top: 30, right: 20, bottom: 30, left: 50},
- width = 1500 - margin.left - margin.right,
- height =1500 - margin.top - margin.bottom;
- var svg_overview = d3.select("body").append("svg")
- .attr("width", width)
- .attr("height", height)
- .append("g")
- .attr("transform", "translate(" + (radius+100) + "," + (radius+100) + ")");
- var line = d3.svg.line.radial()
- .interpolate("bundle")
- .tension(.85)
- .radius(function(d) { return d.y; })
- .angle(function(d) { return d.x / 180 * Math.PI; });
- var link = svg_overview.append("g").selectAll(".link"),
- node = svg_overview.append("g").selectAll(".node");
- d3.json("link.json", function(error, data) {
- d3.json("node.json", function(error, classes) {
- source_var='';
- if (error) throw error;
- var nodes = cluster.nodes(packageHierarchy(classes)),
- links = packageImports(nodes);
- link = link
- .data(bundle(links))
- .enter().append("path")
- .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
- .attr("class", "link")
- .attr("d", line)
- .on('mouseover', function(d) {
- // console.log(d.source.source);
- // console.log(d.source.target);
- // console.log(d.target.target);
- // console.log(d.target.target);
- // link.classed("link--target", function(l) { if (l.target === d) console.log("link"); })
- // console.log(d.source.name);
- // console.log(d.target.name);
- // console.log(source_var);
- if (d.source.name==source_var | d.target.name==source_var) {
- console.log("\n\n\n\n--------------------------\n");
- if(d.source.name==source_var) {
- console.log("table 1: ", d.source.name.split(".")[1]);
- console.log("category 1: ", d.source.name.split(".")[0]);
- } else {
- console.log("table 1: ", source_var.split(".")[1]);
- console.log("category 1: ", source_var.split(".")[0]);
- }
- // console.log("category 1: ", data.filter(function (el) {
- // return el.name == d.source.name &&
- // el.imports==d.target.name
- // })[0].schema_orig);
- if(d.source.name==source_var) {
- console.log("table 2: ", d.target.name.split(".")[1]);
- console.log("category 1: ", d.target.name.split(".")[0]);
- } else {
- console.log("table 2: ", d.source.name.split(".")[1]);
- console.log("category 1: ", d.source.name.split(".")[0]);
- }
- // console.log("table 2: ", d.target.name.split(".")[1]);
- // console.log("category 2: ", data.filter(function (el) {
- // return el.name == d.source.name &&
- // el.imports==d.target.name
- // })[0].schema_dest);
- console.log("patient id linkages: ",
- data.filter(function (el) {
- return el.name == d.source.name &&
- el.imports==d.target.name
- })[0].link_id);
- console.log("date linkages: ",
- data.filter(function (el) {
- return el.name == d.source.name &&
- el.imports==d.target.name
- })[0].link_date);
- console.log("other linkages: ",
- data.filter(function (el) {
- return el.name == d.source.name &&
- el.imports==d.target.name
- })[0].link_other);
- console.log("\n--------------------------\n\n\n\n");
- };
- });
- node = node
- .data(nodes.filter(function(n) { return !n.children; }))
- .enter().append("text")
- .attr("class", "node")
- .attr("dy", ".31em")
- .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
- .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
- .text(function(d) { return d.key; })
- .on("click", mouseovered)
- .on("dblclick", mouseouted);
- });
- });
- function mouseovered(d) {
- node
- .each(function(n) { n.target = n.source = false; });
- link
- .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
- .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
- .filter(function(l) { return l.target === d || l.source === d; })
- .each(function() { this.parentNode.appendChild(this); });
- link
- .classed("link--empty", function(l) { if (l.target != d & l.source!= d) return l.source.source = true; })
- node
- .classed("node--target", function(n) { return n.target; })
- .classed("node--source", function(n) { return n.source; });
- node
- .classed("node--empty", function(n) {return n.name.split(".")[1]===d.key; })
- source_var=d.name;
- }
- function mouseouted(d) {
- link
- .classed("link--target", false)
- .classed("link--source", false);
- link
- .classed("link--empty", false)
- node
- .classed("node--target", false)
- .classed("node--source", false);
- }
- function mouseovered_link(d) {
- console.log("hkjdfhsf")
- link
- .classed("link--target", true);
- // .classed("link--source", true)
- }
- function mouseouted_link(d) {
- link
- .classed("link--target", false)
- .classed("link--source", false);
- }
- d3.select(self.frameElement).style("height", diameter + "px");
- // Lazily construct the package hierarchy from class names.
- function packageHierarchy(classes) {
- var map = {};
- function find(name, data) {
- var node = map[name], i;
- if (!node) {
- node = map[name] = data || {name: name, children: []};
- if (name.length) {
- node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
- node.parent.children.push(node);
- node.key = name.substring(i + 1);
- }
- }
- return node;
- }
- classes.forEach(function(d) {
- find(d.name, d);
- });
- return map[""];
- }
- // Return a list of imports for the given array of nodes.
- function packageImports(nodes) {
- var map = {},
- imports = [];
- // Compute a map from name to node.
- nodes.forEach(function(d) {
- map[d.name] = d;
- });
- // For each import, construct a link from the source to target node.
- nodes.forEach(function(d) {
- if (d.imports) d.imports.forEach(function(i) {
- imports.push({source: map[d.name], target: map[i]});
- });
- });
- return imports;
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement