xxxxxxxxxx<html><head lang="en"> <meta charset="UTF-8"> <!--<script type="text/javascript" src="d3.js"></script>--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <title></title></head><body> <style type="text/css"> .title{ font: 20px Verdana; font-weight: bold; } .text1{ font: 10px Verdana; font-weight: normal; color: blue; } .node { //stroke: #fff; //stroke-width: 1.5px; stroke: #333; stroke-width: 1.5px; } .link { stroke: black; stroke-width: 1px; stroke-opacity: 1; fill:none; } text { font: 10px sans-serif; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; } div.tooltip { position: absolute; text-align: center; width: 120px; height: 100px; padding: 2px; font: 12px sans-serif; background: lightsteelblue; border: 0px; border-radius: 8px; pointer-events: none; } </style><p class="title">rRNATagger pipeline - for 16S/18S/ITS amplicons</p><p class="text1">By Julien Tremblay - jtremblay514@gmail.com</p><p class="text1">Version 0.1</p><script type="text/javascript"> //Width and height var w = 1700; var h = 800; var radius = 6; var dataset; var nodes = []; var links = []; //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h) var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); /* svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#004C99"); */ d3.json("pipeline.json", function(error, json) { if (error) return console.warn(error); dataset = json; console.log(json) //visualizeit(); update(); }); function update() { //Initialize a default force layout, using the nodes and edges in dataset var force = d3.layout.force() .nodes(dataset.nodes) .links(dataset.links) .size([w, h]) .linkDistance(30) .charge(-300) .start(); //var colors = d3.scale.category10(); var color = d3.scale.category20(); // Per-type markers (i.e. marker=arrow, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(["next"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0, -5L10,0L0,5"); //Create edges as lines edges = svg.selectAll(".link") .data(dataset.links) .enter() .append("path") .attr("marker-end", function(d) { return "url(#next)"; }) .attr("class", "link"); //.style("stroke", "#ccc"); //.style("stroke-width", 1); //Create nodes as circles nodes = svg.selectAll(".node") .data(dataset.nodes) .enter() .append("circle") .attr('r', function(d) { if(d.value == 1){ return 5; }else{ return d.value; } }) .attr("class", "node") .attr("group_name", function(d) { return d.group; }) .attr("selected", function(d){ return "false"; }) .style("fill", function(d) { return color(d.group); }) .on("click", click) .call(force.drag); nodes.on("mouseover", function(d) { console.log(d); div.transition() .duration(200) .style("opacity", .9) //div .html(formatTime(d.date) + "<br/>" + d.close) div.html("<br>" + d.desc + "<br>") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }); // Append the labels to each group var text = svg.selectAll("text") .data(force.nodes()) .enter().append("text") .attr("x", 8) .attr("y", ".31em") .text(function (d) { return d.name; }); //Every time the simulation "ticks", this will be called force.on("tick", function () { edges.attr("d", linkArc); //nodes //nodes.attr("cx", function (d) {return d.x; }) //.attr("cy", function (d) { return d.y; }); //nodes to stay inside canvas nodes.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(w - radius, d.x)); }) .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(h - radius, d.y)); }); text.attr("transform", transform); }); function click(d) { if (!d3.event.defaultPrevented) { var curr_selection = d3.selectAll("circle[group_name=" + d.group + "]") var curr_group = curr_selection.transition() .duration(700) .ease("bounce") .attr({ r: function(d) { currRadius = d3.select(this).attr("r"); if(d3.select(this).attr('selected') == "false"){ console.log("was selected: " + d3.select(this).attr('selected')) console.log("currRadius: " + currRadius) return (currRadius * 2); }else{ //d3.select(this).attr('selected') = "true"; console.log("was not selected: " + d3.select(this).attr('selected')) console.log("currRadius: " + currRadius) return (currRadius / 2); } }, selected: function(d){ if(d3.select(this).attr('selected') == "false"){ return "true"; }else{ return "false"; } } }) console.log(curr_group) console.log(new_selection) //var curr_nodes = node } } function linkArc(d) { var dx = d.target.x - d.source.x; var dy = d.target.y - d.source.y; var dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; } function transform(d) { return "translate(" + d.x + "," + d.y + ")"; } }</script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js