d3.js 用于显示工作流运行时状态

d3.js for showing workflow runtime state

我们希望以图形方式描述 运行 工作流的状态。例如,在下面的屏幕截图中,显示了工作流的运行时状态。 activity 下方的绿色小框表示 activity 已处理 -

我需要为工作流系统实现类似的东西。用户需要查看工作流的运行时状态(流程中有哪些活动)以及哪些活动已经完成。

我希望使用 D3 可视化 API 来实现这一点。我有几个问题 -

  1. 它是免费的还是需要许可证
  2. D3能实现这样的功能吗?我正在查看示例,但找不到任何类似的东西

https://github.com/mbostock/d3/wiki/Gallery

  1. 任何其他更适合此类要求的API

感谢期待。

您应该意识到,与 Highcharts 不同,例如,D3 不是图形或可视化的集合。它是一个库(就像 jQuery),允许您从头开始创建所述可视化。

现在,回答您的问题:

  1. Is it free or does it need a license

    d3js.org底部所述:

    Library is released under BSD license. Copyright 2013 Mike Bostock.

    并且 wikipedia article 在 BSD 3 条款许可证上声明:

    This version allows unlimited redistribution for any purpose as long as its copyright notices and the license's disclaimers of warranty are maintained. The license also contains a clause restricting use of the names of contributors for endorsement of a derived work without specific permission.

  2. Can something like this be achieved in D3? I was looking at the examples, but couldn't find anything similar

    是的,这是可以实现的。您可能会在 this directed graph editor example.

  3. 中找到一些灵感
  4. Any other API which would be more appropriate for this kind of a requirement

    对于简单的情况,D3 本身就足够了。

我有类似的需求,我能够使用 d3 制作这种图表:

您可以找到相同的代码 here

在此我使用 bootstrap 面板作为每个状态的内容,我们可以通过调整一些代码来改变方框的位置和箭头的方向来满足您的要求。

如果需要,我可以帮助您进一步修改代码。

希望这对您有所帮助 :) .