Question

我对D3非常（非常）陌生，仍在尝试弄清楚它是如何工作的。我被要求在Web应用程序中创建类似于“流程图”或“工作流程图”的内容。建筑师建议D3对此非常适合。（我不确定）。这个想法是采取“步骤”或“任务”，然后将它们拖放到一行中以创建工作流。预计在此受限应用中，工作流将水平绘制，因此看起来可能像这样：

[Step1]-->[Step2]-->[Step3]

换句话说，如果我们使用“力图”来考虑，则每个“步骤”都是一个节点，它们之间的每一行都是一个“链接”。

由于某种原因，我为此感到挣扎。一旦我通过D3运行数据，它将所有节点x和y值更改为其他值，并且大多数图表不在屏幕上。

我想我可以完全忽略“力图”，而只需手工绘制SVG元素，但是由于我将以图形方式添加/删除/编辑节点，因此仅管理数据将很有意义并让D3处理实际的渲染。

只需清楚一点，除了将节点拖放到图表中/从图表中拖出之外，不需要任何方式使结果图表为“可移动/可拖动”。我希望它保持原样，并在添加/删除节点时根据需要重新绘制自身。

我当前正在使用D3 v3.x，我更喜欢使用最新的v5.x，但是似乎网上几乎所有示例都针对v3.x

这是我的代码：

      <svg #chart id="chart" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>  

const nodes = [{ x: 100, y: 150 }, { x: 200, y: 150 }, { x: 300, y: 150 }];
const links = [{ source: 0, target: 1 }, { source: 1, target: 2 }];
const svg = d3.select('#chart');
const force = d3.layout
          .force()
          .nodes(nodes)
          .links(links);

force.linkDistance(50);

const link = svg
          .selectAll('.link')
          .data(links)
          .enter()
          .append('line')
          .attr('class', 'link');

const node = svg
          .selectAll('.node')
          .data(nodes)
          .enter()
          .append('circle')
          .attr('class', 'node');

        force.on('end', function() {

          node
            .attr('r', 10)
            .attr('cx', function(d) {  
              return d.x;
            })
            .attr('cy', function(d) {
              return d.y;
            });

          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;
            });
        });

        force.start();

      }

D3-关闭“强制”，创建流程图

0 个答案: