API tools faq
paste
Advertisement
ll6068

D3 data problem

ll6068
Nov 18th, 2014
399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>GC Solution Tree</title>
  6.     <link rel="stylesheet" type="text/css" href="styles.css"/>
  7.  
  8. <script src="d3.js"></script>
  9. <script type="text/javascript" src="desc.js"></script>
  10.  
  11.     <style type="text/css">
  12.         .node circle {
  13.             cursor: pointer;
  14.             fill: #fff;
  15.             stroke: steelblue;
  16.             stroke-width: 1.5px;
  17.         }
  18.  
  19.         .node text {
  20.             font-size: 13px;
  21.         }
  22.  
  23.         path.link {
  24.             fill: none;
  25.             stroke: #ccc;
  26.             stroke-width: 2.0px;
  27.         }
  28.     </style>
  29. </head>
  30.  
  31. <body onload="simpleFlare()">
  32.  
  33.  
  34. <script type="text/javascript">
  35. function tree() {
  36.  
  37.  
  38.     var _chart = {};
  39.  
  40.     var _width = 1000, _height = 1100,
  41.             _margins = {top: 30, left: 120, right: 30, bottom: 30},
  42.             _svg,
  43.             _nodes,
  44.             _i = 0,
  45.             _tree,
  46.             _diagonal,
  47.             _bodyG;
  48.  
  49.     _chart.render = function () {
  50.         if (!_svg) {
  51.             _svg = d3.select("body").append("svg")
  52.                     .attr("height", _height)
  53.                     .attr("width", _width);
  54.         }
  55.  
  56.         renderBody(_svg);
  57.     };
  58.  
  59.     function renderBody(svg) {
  60.         if (!_bodyG) {
  61.             _bodyG = svg.append("g")
  62.                 .attr("class", "body")
  63.                 .attr("transform", function (d) {
  64.                     return "translate(" + _margins.left
  65.                         + "," + _margins.top + ")";
  66.                 });
  67.         }
  68.  
  69.         _tree = d3.layout.tree()
  70.                 .size([
  71.                     (_height - _margins.top - _margins.bottom),
  72.                     (_width - _margins.left - _margins.right)
  73.                 ]);
  74.  
  75.         _diagonal = d3.svg.diagonal()
  76.                 .projection(function (d) {
  77.                     return [d.y, d.x];
  78.                 });
  79.  
  80.         _nodes.x0 = (_height - _margins.top - _margins.bottom) / 2;
  81.         _nodes.y0 = 0;
  82.  
  83.         render(_nodes);
  84.     }
  85.  
  86.  
  87.  
  88. function startcontext(){
  89.  
  90. d3.select("svg").append("foreignObject")
  91. .attr("id","infobox")
  92. .attr("width", 400)
  93. .attr("height", 500)
  94. .attr("x",1).attr("y",10)
  95. .append("xhtml:body")
  96. .style("font", "16px 'Helvetica Neue'")
  97. .html("<B>Click on any Solution Node For Information</b>");
  98.  
  99.  
  100.  
  101. }
  102.  
  103. //** Main Entry ***
  104.  
  105.     function render(source) {
  106.  
  107.        startcontext();
  108.  
  109.         var nodes = _tree.nodes(_nodes).reverse();
  110.  
  111.         renderNodes(nodes, source);
  112.  
  113.         renderLinks(nodes, source);
  114.     }
  115.  
  116.     function renderNodes(nodes, source) {
  117.         nodes.forEach(function (d) {
  118.             d.y = d.depth * 180;
  119.         });
  120.  
  121.         var node = _bodyG.selectAll("g.node")
  122.                 .data(nodes, function (d) {
  123.                     return d.id || (d.id = ++_i);
  124.                 });
  125.  
  126.         var nodeEnter = node.enter().append("svg:g")
  127.                 .attr("class", "node")
  128.                 .attr("transform", function (d) {
  129.                     return "translate(" + source.y0
  130.                         + "," + source.x0 + ")";
  131.                 })
  132.                 .on("click", function (d) {
  133.      //* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  134.  
  135. //toggle(d);
  136. //render(d);
  137.            
  138. d3.selectAll("#infobox").remove();
  139.  
  140. //var mytext="...<a href=\"http:\\\\www.google.com\">google</a>..."+d.KI;
  141.  
  142. var index=d.GID
  143. if(index>12)index=14;
  144. console.log("GID: "+d.GID+"  Index:"+index);
  145. console.log("E[index]: "+sdata[index][0]);
  146. console.log("indexOf(Digital): "+d.name.indexOf("Digital"));
  147.  
  148.  
  149.  
  150. var prestr="";
  151. if (index==14)prestr=d.name+" : ";
  152.  
  153. if(d.name.indexOf("Digital")>=0)index=13;
  154.  
  155. var htstr="<table  border=\"0\" style=\"width:100%\"  bgcolor=\"#72a0c1\" ><tr><td><B>"+prestr+sdata[index][0]+"</B>";
  156. htstr +=  "<p><i>"+sdata[index][1]+"</i>"+sdata[index][2]+"</p></td></tr></table>";
  157.  
  158.  
  159. d3.select("svg").append("foreignObject")
  160. .attr("id","infobox")
  161. .attr("width", 400)
  162. .attr("height", 500)
  163. .attr("x",1).attr("y",function(){return((d3.event.pageY)-80);})
  164. .append("xhtml:body")
  165. .style("font", "17px 'Verdana'")
  166. .html(htstr);
  167.                 });
  168.  
  169.   nodeEnter.append("svg:circle")
  170.                 .attr("r", 1e-6)
  171.    
  172.               // .style("stroke", function(d) { if(d.name=="Digital Strategy") return "red"; })
  173.               //  .style("stroke", function(d) { if(d.name=="Strategy") return "blue"; })
  174.                   .style("fill", function(d) { return d.type; })
  175.                   //style("fill", function(d) { return d.level; });
  176.          //       .style("fill", function (d) { return d._children ? "lightsteelblue" : "#ff0"; });
  177.  
  178.         var nodeUpdate = node.transition()
  179.                 .attr("transform", function (d) {
  180.                     return "translate(" + d.y + "," + d.x + ")";
  181.                 });
  182.  
  183.         nodeUpdate.select("circle")
  184.                 .attr("r", 8.0)
  185.                 //.style("fill", function(d) { return d.type; })
  186.  
  187.                //.style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff";
  188.               .style("fill", function(d) { return d.type;
  189.              //  .style("fill", function (d) { return d._children ? "lightsteelblue" : d.type;
  190.  
  191.                 });
  192.  
  193.         var nodeExit = node.exit().transition()
  194.                 .attr("transform", function (d) {
  195.                     return "translate(" + source.y
  196.                         + "," + source.x + ")";
  197.                 })
  198.                 .remove();
  199.  
  200.         nodeExit.select("circle")
  201.                 .attr("r", 1e-6);
  202.  
  203.         renderLabels(nodeEnter, nodeUpdate, nodeExit);
  204.  
  205.         nodes.forEach(function (d) {
  206.             d.x0 = d.x;
  207.             d.y0 = d.y;
  208.         });
  209.     }
  210.  
  211.     function renderLabels(nodeEnter, nodeUpdate, nodeExit) {
  212.         nodeEnter.append("svg:text")
  213.                 .attr("x", function (d) {
  214.                     return d.children || d._children ? -10 : 10;
  215.                 })
  216.                 .attr("dy", ".35em")
  217.                 .attr("text-anchor", function (d) {
  218.                     return d.children || d._children ? "end" : "start";
  219.                 })
  220.                 .text(function (d) {
  221.                     return d.name;
  222.                 })
  223.                 .style("fill-opacity", 1e-6);
  224.  
  225.         nodeUpdate.select("text")
  226.                 .style("fill-opacity", 1);
  227.  
  228.         nodeExit.select("text")
  229.                 .style("fill-opacity", 1e-6);
  230.     }
  231.  
  232.     function renderLinks(nodes, source) {
  233.         var link = _bodyG.selectAll("path.link")
  234.                   .data(_tree.links(nodes), function (d) {
  235.                     return d.target.id;
  236.                 });
  237.  
  238.         link.enter().insert("svg:path", "g")
  239.                 .attr("class", "link")
  240.                 .style("stroke-width",function(d){ return d.type; })
  241.                 .style("stroke",function(d){ return d.type;})
  242.                  
  243.                 .attr("d", function (d) {
  244.                     var o = {x: source.x0, y: source.y0};
  245.                     return _diagonal({source: o, target: o});
  246.                 });
  247.  
  248.         link.transition()
  249.                 .attr("d", _diagonal);
  250.  
  251.         link.exit().transition()
  252.                 .attr("d", function (d) {
  253.                     var o = {x: source.x, y: source.y};
  254.                     return _diagonal({source: o, target: o});
  255.                 })
  256.                 .remove();
  257.     }
  258.  
  259.     function toggle(d) {
  260.         if (d.children) {
  261.             d._children = d.children;
  262.             d.children = null;
  263.         } else {
  264.             d.children = d._children;
  265.             d._children = null;
  266.         }
  267.     }
  268.  
  269.     function toggleAll(d) {
  270.         if (d.children) {
  271.             d.children.forEach(toggleAll);
  272.             toggle(d);
  273.         }
  274.     }
  275.  
  276.     _chart.width = function (w) {
  277.         if (!arguments.length) return _width;
  278.         _width = w;
  279.         return _chart;
  280.     };
  281.  
  282.     _chart.height = function (h) {
  283.         if (!arguments.length) return _height;
  284.         _height = h;
  285.         return _chart;
  286.     };
  287.  
  288.     _chart.margins = function (m) {
  289.         if (!arguments.length) return _margins;
  290.         _margins = m;
  291.         return _chart;
  292.     };
  293.  
  294.     _chart.nodes = function (n) {
  295.         if (!arguments.length) return _nodes;
  296.         _nodes = n;
  297.         return _chart;
  298.     };
  299.  
  300.     return _chart;
  301. }
  302.  
  303. var chart = tree();
  304.  
  305. function largeFlare() {
  306. // play.json and flare.json
  307.     d3.json("ptestx.json", function (nodes) {
  308.         console.log(nodes);
  309.         chart.nodes(nodes).render();
  310.     });
  311. d3.selectAll("#foreignObject").remove();
  312. }
  313. function simpleFlare() {
  314.  
  315.     d3.json("ptestx.json", function (nodes) {
  316. console.log(nodes);
  317.         chart.nodes(nodes).render();
  318.     });
  319. d3.selectAll("#foreignObject").remove();
  320. }
  321. </script>
  322.  
  323. <div class="control-group">
  324.     <button onclick="largeFlare()">ORG KI View</button>
  325.     <button onclick="simpleFlare()">Business View</button>
  326. </div>
  327.    
  328.  
  329. </body>
  330.  
  331. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!