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
浙公网安备 33010602011771号