Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var svg;
- var cursor;
- var node;
- var link;
- var nodes ;
- var force;
- var width = 960,
- var height = 500;
- var fill = d3.scale.category20();
- var maquina = { "name": "Máquina", "children": [] };
- var material = { "name": "Material", "children": [] };
- var medida = { "name": "Medida", "children": [] };
- var maodeobra = { "name": "Mão-de-obra", "children": [] };
- var meioambiente = { "name": "Meio ambiente", "children": [] };
- var metodo = { "name": "Método", "children": [] };
- var data2 = {
- "name": "Efeito",
- "children": [
- ],
- "type": "user"
- }
- data2.children.push(maquina);
- data2.children.push(material);
- data2.children.push(medida);
- data2.children.push(maodeobra);
- data2.children.push(meioambiente);
- data2.children.push(metodo);
- var fishbone = d3.fishbone();
- var size = (function(){
- return {width: this.clientWidth, height: this.clientHeight};
- }).bind(window.document.documentElement);
- //x = w.innerWidth || e.clientWidth || g.clientWidth;
- //y = w.innerHeight|| e.clientHeight|| g.clientHeight;
- // var width = 500, height = 500;
- var creation=Date.now();
- d3.select(window).on('resize.updatesvg', updateWindow);
- svg = d3.select("#fishbone")
- .append("svg")
- // firefox needs a real size
- .attr(size())
- .on("mousemove", mousemove).on("mousedown", mousedownCanvas)
- //.on('mouseover', function(d){
- // var nodeSelection = d3.select(this).style({opacity:'0.8'});
- // nodeSelection.select("text").style({opacity:'5.0'});
- //})
- // .attr("width", width)
- //.attr("height", height)
- // .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
- // set the data so the reusable chart can find it
- //.attr('id','rect_'+creation)
- //.attr('onclick',"removeRect('rect_"+"')")
- .datum(data2)
- // set up the default arrowhead
- .call(fishbone.defaultArrow)
- // call the selection modifier
- .call(fishbone);
- force = d3.layout.force()
- .size([ this.clientWidth, this.clientHeight])
- .nodes([{}]) // initialize with a single node
- .linkDistance(30)
- .charge(-60)
- .on("tick", tick);
- cursor = svg.append("circle")
- .attr("r", 30)
- .attr("transform", "translate(-100,-100)")
- .attr("class", "cursor");
- nodes = force.nodes(),
- links = force.links(),
- node = svg.selectAll(".node"),
- link = svg.selectAll(".link");
- // svg.on("mouseover", function()
- // {d3.select(this).style("fill", "aliceblue");})
- //.on("mouseout", function(){d3.select(this).style("fill", "white");});
- fishbone.force().start();
- function tick() {
- link.attr("x1", function(d) { return d.source.x; })
- .attr("y1", function(d) { return d.source.y; })
- .attr("x2", function(d) { return d.target.x; })
- .attr("y2", function(d) { return d.target.y; });
- node.attr("cx", function(d) { return d.x; })
- .attr("cy", function(d) { return d.y; });
- }
- function restart() {
- node = node.data(nodes);
- //alert(node);
- //node.enter().insert("circle", ".cursor")
- // .attr("class", "node")
- // .attr("r", 5)
- // .on("mousedown", mousedownNode);
- //node.exit()
- // .remove();
- // link = link.data(links);
- //link.enter().insert("line", ".node")
- // .attr("class", "link");
- //link.exit()
- // .remove();
- force.start();
- }
- function mousemove() {
- cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
- }
- function mousedownCanvas() {
- var point = d3.mouse(this),
- node = {x: point[0], y: point[1]},
- n = nodes.push(node);
- // add links to any nearby nodes
- nodes.forEach(function(target) {
- var x = target.x - node.x,
- y = target.y - node.y;
- if (Math.sqrt(x * x + y * y) < 30) {
- links.push({source: node, target: target});
- }
- });
- restart();
- }
- function mousedownNode(d, i) {
- nodes.splice(i, 1);
- links = links.filter(function(l) {
- return l.source !== d && l.target !== d;
- });
- d3.event.stopPropagation();
- restart();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement