怎么用d3.js画会拐弯的流程图

Question

使用d3.js与dagre-d3能否实现如下图所示的效果

我在网上找了几篇教程，不管是网络拓扑图还是单条线从左到右的流程图都会画了，但是这种需要拐弯的，能用dagre-d3画吗，他的rankdir好像没有类似的取值

Answer 1

【以下回答由 GPT 生成】

你可以使用d3.js和dagre-d3库来绘制拐弯的流程图。虽然dagre-d3库的rankdir属性默认只支持从左到右的布局，但是你可以手动修改库中的源码来实现拐弯的布局。以下是具体的解决方案：

1. 首先，将d3.js和dagre-d3库添加到你的项目中。你可以通过以下方式引入它们：

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dagre-d3@0.6.4/dist/dagre-d3.min.js"></script>

1. 接下来，创建一个SVG容器来放置你的流程图：

<svg id="graph" width="800" height="600"></svg>

1. 在JavaScript中，你需要获取要展示的流程图数据，并将其转换为dagre-d3所需的格式。假设你的数据是一个包含节点和边的对象，格式如下：

var data = {
  nodes: [
    { id: 'A', label: 'Node A' },
    { id: 'B', label: 'Node B' },
    { id: 'C', label: 'Node C' }
  ],
  edges: [
    { source: 'A', target: 'B', label: 'Edge 1' },
    { source: 'B', target: 'C', label: 'Edge 2' }
  ]
};

1. 现在，使用dagre-d3库将数据转换为dagre布局，并在SVG容器中绘制流程图。这里需要注意的是，你需要手动修改dagre-d3库中的源码来实现拐弯的布局。

var svg = d3.select('svg');
var inner = svg.append('g');

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// Add nodes to the graph
data.nodes.forEach(function(node) {
  g.setNode(node.id, { label: node.label });
});

// Add edges to the graph
data.edges.forEach(function(edge) {
  g.setEdge(edge.source, edge.target, { label: edge.label });
});

// Set custom layout
g.graph().rankdir = 'TB'; // 设置为从上到下的布局
g.graph().nodesep = 20; // 设置节点之间的间距
g.graph().edgesep = 10; // 设置边之间的间距
g.graph().ranksep = 50; // 设置层级之间的间距

// Create the renderer
var render = new dagreD3.render();

// Render the graph in the SVG container
render(inner, g);

// Center the graph
var initialScale = 0.75;
svg.call(
  d3.zoom().on('zoom', function() {
    inner.attr('transform', d3.event.transform);
  })
);
svg.call(
  d3.zoom().transform,
  d3.zoomIdentity.translate(
    (svg.attr('width') - g.graph().width * initialScale) / 2,
    20
  ).scale(initialScale)
);

现在你应该能看到一个包含拐弯的流程图了。通过修改g.graph().rankdir属性，你可以调整布局的方向，并通过调整其他的属性如g.graph().nodesep、g.graph().edgesep和g.graph().ranksep来进一步定制布局的样式。

希望这些信息对你有所帮助！如果你还有其他问题，请随时问我。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^