javascript - scroll bar in scaling svg image -
i have following d3 graph
var width = 500, height = 300; d3.select("body").append("div") .attr("id", "containerdiv"); // remove old svg //d3.select("#wkfsvg").remove(); // add new svg var grapharea = d3.select("#containerdiv").append("svg") .attr({ width: width, height: height, "pointer-events": "all" }) .attr("id","wkfsvg"); var g = new dagred3.graphlib.graph().setgraph({}); grapharea.insert("g", "g"); var nodesjson = [ { "nodes": "initiate", "status": "startend", "creation_date": "", "performer_name": "", "execution_type": "automatic" }, { "nodes": "find next approver", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "automatic" }, { "nodes": "check manager", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "automatic" }, { "nodes": "set status & acl project manager", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "automatic" }, { "nodes": "set status & acl sign off approvers", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "it project manager approves", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "id": "finance approver", "nodes": "finance approver", "status": "dormant", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "send email completion", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "send requestor", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "send email requestor", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "id": "set acl on form requestor", "nodes": "set acl on form requestor", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "set completion acl on form", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "id": "set completion acl on po", "nodes": "set completion acl on po", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "set completion acl on attachments", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "set acl on attachment", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "update comments of pm rejection", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "update comments of fa rejection", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "update comments of pm", "status": "completed", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "update comments of fa", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "update comments of requestor", "status": "future", "creation_date": "", "performer_name": "", "execution_type": "manual" }, { "nodes": "end", "status": "startend", "creation_date": "", "performer_name": "", "execution_type": "manual" } ]; // automatically label each of nodes nodesjson.foreach(function(node) { if(node.status == "future") { if(node.execution_type == "manual") { g.setnode(node.nodes, { labeltype: "html", label: node.nodes+' <tspan dx="0" dy="-10">\uf007</tspan>', class: "future" }); } else { g.setnode(node.nodes, { label: node.nodes, class: "future" }); } } else if(node.status == "completed") { if(node.execution_type == "manual") { g.setnode(node.nodes, { labeltype: "html", label: node.nodes+' <tspan dx="0" dy="-10">\uf007</tspan>', class: "completed" }); } else { g.setnode(node.nodes, { label: node.nodes, class: "completed" }); } } else if(node.status == "dormant") { if(node.execution_type == "manual") { g.setnode(node.nodes, { labeltype: "html", label: node.nodes, class: "dormant" }); } else { g.setnode(node.nodes, { label: node.nodes, class: "dormant" }); } } else if(node.status == "startend") { g.setnode(node.nodes, { label: node.nodes, class: "startend" }); } else { g.setnode(node.nodes, { label: node.nodes }); } }); var edgesjson = [ { "type": "approve", "source": "find next approver", "target": "check manager" }, { "type": "approve", "source": "check manager", "target": "set status & acl sign off approvers" }, { "type": "approve", "source": "check manager", "target": "set status & acl project manager" }, { "type": "approve", "source": "set status & acl project manager", "target": "it project manager approves" }, { "type": "approve", "source": "set status & acl sign off approvers", "target": "finance approver" }, { "type": "approve", "source": "set acl on form requestor", "target": "send requestor" }, { "type": "approve", "source": "set completion acl on form", "target": "set completion acl on po" }, { "type": "approve", "source": "it project manager approves", "target": "send email requestor" }, { "type": "approve", "source": "set completion acl on po", "target": "set completion acl on attachments" }, { "type": "approve", "source": "set completion acl on attachments", "target": "send email completion" }, { "type": "approve", "source": "initiate", "target": "set acl on attachment" }, { "type": "approve", "source": "set acl on attachment", "target": "find next approver" }, { "type": "approve", "source": "update comments of pm rejection", "target": "set acl on form requestor" }, { "type": "reject", "source": "it project manager approves", "target": "update comments of pm rejection" }, { "type": "approve", "source": "update comments of fa rejection", "target": "set acl on form requestor" }, { "type": "approve", "source": "send email requestor", "target": "update comments of pm" }, { "type": "approve", "source": "update comments of pm", "target": "set status & acl sign off approvers" }, { "type": "approve", "source": "finance approver", "target": "update comments of fa" }, { "type": "approve", "source": "update comments of fa", "target": "set completion acl on form" }, { "type": "reject", "source": "finance approver", "target": "update comments of fa rejection" }, { "type": "approve", "source": "send requestor", "target": "update comments of requestor" }, { "type": "approve", "source": "update comments of requestor", "target": "check manager" }, { "type": "approve", "source": "send email completion", "target": "end" } ]; edgesjson.foreach(function(edge) { if(edge.type == "approve") { g.setedge(edge.source, edge.target, { label: "" }); } // make edge of rejected paths red , dashed if(edge.type == "reject") { g.setedge(edge.source, edge.target, { label: "", class: "rejectedgepath" }); } }); var inner = grapharea.select("g"); // set rankdir //g.graph().rankdir = "lr"; g.graph().nodesep = 10; // set zoom support var zoom = d3.behavior.zoom().on("zoom", function() { inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")"); }); grapharea.call(zoom); // create renderer var render = new dagred3.render(); // run renderer. draws final graph. render(inner, g); // center graph var initialscale = 0.75; zoom .translate([(grapharea.attr("width") - g.graph().width * initialscale) / 2, 20]) .scale(initialscale) .event(grapharea); //grapharea.attr('height', g.graph().height * initialscale + 40); var selectednode = inner.selectall("g.node"); selectednode.on('click', function (d) { var nodeinfo = getnodeinfo(d); console.log('clicked '+nodeinfo.nodes+' (status: '+nodeinfo.status+')'); }); function getnodeinfo(name) { (var i=0;i<nodesjson.length;i++) if (nodesjson[i].nodes==name) return nodesjson[i]; }.node rect { stroke: #333; fill: #fff; } .edgepath path { stroke: #333; fill: #333; stroke-width: 1.5px; } .rejectedgepath path { stroke: red; fill: red; stroke-width: 1.5px; stroke-dasharray: 5, 5; } g.dormant > rect { fill: #cc66ff; } g.completed > rect { fill: #66ff99; } g.future > rect { fill: #99ccff; } g.acquired > rect { fill: #ebbfff; } g.paused > rect { fill: #ff0000; } g.startend > rect { fill: #cc6666; } foreignobject { fill: black; font-family: fontawesome; font-size: 15px; text-anchor: middle; // cursor: move; } #wkfsvg { border: 1px solid #ccc; overflow: auto; } #containerdiv { overflow: auto; }<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>it works fine except issue related scrolling.
right (without scrollbars), complete diagram displays part of hidden outside specified width , height. see hidden areas user need drag graph , bring in visible canvas (this hide other areas graph moved).
i need provide scrollbar instead of dragging graph user can scroll up/down , left/right view complete graph.
i have tried providing auto scroll in css both div , svg elemment without luck.
can please me in achieving this.
Comments
Post a Comment