dagre-d3使用问题

最近一个项目需要根据数据,动态画出流程图,于是在网上翻了半天,找了几个js画图插件,GOjs,jsmind,dagre-d3,最后选择使用dagre-d3这款画图插件,下面是在做的过程中遇到的一些问题,记录下来和备注

1.如何让图形横着展示,解决方案

 // Set up an SVG group so that we can translate the final graph.
 var svg = d3.select("#svg" ),
     inner = svg.append("g");

 // Set the rankdir
 //设置横向排列,如果不想横向排列就去掉这段代码
 g.graph().rankdir = "LR"
 g.graph().nodesep = 60;

 // Set up zoom support
 var zoom = d3.behavior.zoom().on("zoom", function () {
      inner.attr("transform", "translate(" + d3.event.translate + ")" +
       "scale(" + d3.event.scale + ")");
      });
 svg.call(zoom);

 // Simple function to style the tooltip for the given node.
 var styleTooltip = function (name, description) {
       return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
     };

dagre-d3地址:https://github.com/cpettitt/dagre-d3

posted @ 2017-12-14 08:58  虫虫儿  阅读(1599)  评论(0)    收藏  举报