D3.js v5 -不渲染简单流图

基础概念

D3.js（Data-Driven Documents）是一个JavaScript库，用于使用数据来操作文档。D3.js v5 是该库的一个版本，提供了强大的数据可视化功能。流图（Flowchart）是一种图形表示法，用于描述算法、工作流程或系统中的步骤和决策点。

类型

流图可以分为以下几种类型：

顺序流图：按照顺序展示步骤。
决策流图：包含决策点和分支。
循环流图：包含循环结构。

应用场景

流图广泛应用于以下场景：

算法描述：用于描述算法的步骤和逻辑。
工作流程：用于展示工作流程中的各个步骤和决策点。
系统设计：用于描述系统的架构和流程。

问题：D3.js v5 不渲染简单流图

原因

D3.js v5 不渲染简单流图可能有以下几个原因：

数据问题：数据格式不正确或缺失。
选择器问题：选择器没有正确选中需要渲染的元素。
布局问题：布局算法没有正确应用。
样式问题：CSS 样式没有正确应用。

解决方法

以下是一个简单的 D3.js v5 流图示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Flowchart Example</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
        .node {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 2px;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const svg = d3.select("svg");
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        const nodes = [
            { id: "Start" },
            { id: "Step1" },
            { id: "Decision" },
            { id: "Step2A" },
            { id: "Step2B" },
            { id: "End" }
        ];

        const links = [
            { source: "Start", target: "Step1" },
            { source: "Step1", target: "Decision" },
            { source: "Decision", target: "Step2A" },
            { source: "Decision", target: "Step2B" },
            { source: "Step2A", target: "End" },
            { source: "Step2B", target: "End" }
        ];

        const simulation = d3.forceSimulation(nodes)
            .force("link", d3.forceLink(links).id(d => d.id))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(width / 2, height / 2));

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

        const node = svg.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 10);

        node.append("title")
            .text(d => d.id);

        simulation.on("tick", () => {
            link
                .attr("x1", d => d.source.x)
                .attr("y1", d => d.source.y)
                .attr("x2", d => d.target.x)
                .attr("y2", d => d.target.y);

            node
                .attr("cx", d => d.x)
                .attr("cy", d => d.y);
        });
    </script>
</body>
</html>

参考链接

总结

如果你遇到 D3.js v5 不渲染简单流图的问题，首先检查数据格式和选择器是否正确，然后确保布局和样式应用正确。通过上述示例代码，你可以更好地理解如何使用 D3.js v5 创建和渲染流图。

D3.js v5 -不渲染简单流图

、

在下面的代码片段中，我使用硬编码的数据和最小的样式创建了一个极其简化的流图。 "#003366") .attr("d", area); <script src="https://d3js.org/d3.v5.min.js"></script> 正如我们所看到的，该图并未显示问题考虑到代码的简单性和与here看到的全功能模板的相似性，为什么这个图不能像预期的那样呈现？

浏览 34提问于2021-08-13得票数 1

回答已采纳

1回答

本地主机上未显示D3js饼图

、、

对D3.js来说仍然是全新的。我正在尝试用Mac在我的本地服务器上测试一个非常简单的D3.js环形图。

浏览 40提问于2019-04-15得票数 1

回答已采纳

1回答

按比例混合v3和v5的d3气泡图

在尝试渲染气泡贴图时，我正在努力混合使用d3、v3和v5版本。有人可以帮助这个苦苦挣扎的D3.JS新手使用这个相对简单的codepen代码吗？

浏览 11提问于2020-01-20得票数 0

回答已采纳

1回答

d3.js中简单的图形布局？

、

我想用d3.js绘制一个简单的图，就像这样我未能在v5 API文档和互联网上找到图形布局。所有示例都使用来自的布局。虽然它看起来令人印象深刻，但我并不是在寻找物理模拟的图形布局。是否有一个更简单的布局，还是最好的方式使用d3.force布局关闭物理？

浏览 2提问于2018-05-01得票数 1

1回答

我目前正在使用Graphviz来可视化控制流图。基本上，(可简化的)控制流图是一个DAG加上一些指向前一层中节点的边。后一条边不应影响节点放置。目前，dot绘制图形非常整洁，但它缺乏一种简单的方法来添加交互性(例如折叠、滚动、缩放)，这对于分析非常大的图形来说是无价的。因此，我选择d3.js作为最成熟和功能最丰富的图形库。我非常确定在d3.js中有一种简单的方法来绘制 (和dot一样)，但我似乎不认识它。我该怎么做？如果这有帮助，我已经在我的CFG上执

浏览 0提问于2012-07-05得票数 10

回答已采纳

1回答

静态D3力-有向图性能

、、、

所以目前，我正试图创建一个力有向图，图中有几千个节点和大约30k个链接。你可能会猜到，模拟的速度非常慢。相反，我想要做的是预先计算节点的所有位置，只呈现一个静态(但却是交互式的)图形。有没有一种方法可以使用d3.js计算一个力有向图而不渲染它(使它更快)，然后根据预先计算的值绘制静态图？我的代码目前基于Mike的

浏览 3提问于2012-12-26得票数 4

1回答

d3.js条形图：.text没有出现

、、、

我正在使用d3.js构建一个简单的条形图，它工作得很好。然而，当我试图在每个条子上显示文本时，什么都不会发生。控制台不返回任何错误，因此我无法理解问题。我的代码是可用的，我试着显示像"Hello“这样的简单文本，但仍然什么也没有显示。

浏览 2提问于2016-04-24得票数 1

回答已采纳

4回答

用于动态网络可视化的JavaScript库？

、、

澄清：这个问题与(但不同于)以下问题有关：

浏览 7提问于2013-09-26得票数 13

回答已采纳

1回答

为什么我的更新后的数据没有重新渲染？

我正在使用D3.js中的"update“模式。我正在创建一个简单的条形图，当您按下“更改”按钮时，它将更新数据。我的问题是，当您按下“更改”按钮时，前三个渲染的条形图不会重新渲染。

浏览 0提问于2013-05-10得票数 2

回答已采纳

1回答

加权有向图的Prim算法

、、、

我研究了Prim关于加权有向图的算法。 (v1，v2)：8(v1，v4)：7(v4，v5)：7访问顶点v1和(顶点，距离访问顶点v4和(顶点，距离) => (v5,7) 现在，在所有的v5中，距离最小，

浏览 2提问于2014-03-18得票数 0

1回答

Protovis和JqPlot性能

、、、

我发现两者都很好。但我想知道它们的性能，同时绘制大量数据点，比如100,000到10,000,000。在速度和准确性方面。

浏览 1提问于2010-12-15得票数 2

2回答

使D3.js堆叠条形图响应

我正在尝试获得一个D3.js (v5)堆叠条形图，以响应地调整大小。我在标准条形图上做了一些类似的工作，但是关于包含堆叠条形图的新组的一些东西让我感到困惑.目前，条形条调整了大小，但以前的条形保持不变。更新：--我不希望使用preserveAspectRatio="xMinYMin meet"和svg上的viewBox属性来做出响应--这将调整图表中的所有内容，包括我不想要的任何文本。

浏览 0提问于2021-01-04得票数 1

回答已采纳

29回答

JavaScript图表库

、

有人会推荐一个特别的JavaScript图表库吗--特别是一个根本不使用flash的图表库？

浏览 1提问于2008-09-23得票数 223

3回答

d3.js与chart.js的比较(仅适用于图表)

、、、

我在我的项目中使用过几次chart.js，但我从未使用过d3.js。很多人说d3.js是最好的图表javascript框架，但是没有人能够解释为什么，特别是当我想要和chart.js比较的时候。

浏览 15提问于2014-12-07得票数 98

回答已采纳

1回答

在d3.js中更新饼图

、、

我在整个StackOverflow中搜索了许多更新饼图的示例，并查看了d3.js中与更新饼图相关的d3.js块，但我似乎不能只使用d3.js版本4进行简单的更新。我有一个Fiddle ()，它显示了我在这一点上运行的代码(或不运行，视情况而定)。对update函数的初始调用基于第一个数据集创建饼图，但是由"Update“按钮启动的第二个调用不执行任何操作。我知道饼图生成器生成了正确的对象(我检查了要检查的对象)，但没有重新

浏览 1提问于2017-05-10得票数 1

1回答

通过fabric.js推动D3.js输出以支持IE8？

、、

拉斐尔可以使用可视化库 (它输出SVG并与IE8不兼容)使用桥接库，这是一种适合于与拉斐尔一起使用的D3分支。是否有比D3项目分叉和调整其输出的D34Raphael方法更简单的方法来推动D3输出？

浏览 1提问于2013-07-23得票数 6

回答已采纳

2回答

使用不带点的d3.js的有向无环图

、、、、

我正在尝试使用d3.js绘制有向无环图。在搜索布局时，我遇到了，但它似乎用处不大，因为我不想在任何地方使用基于点的代码。

浏览 7提问于2013-09-23得票数 17

回答已采纳

1回答

预计算和设置D3.js中节点的初始位置

、、、

我试着用iGraph预先计算稳定力有向图的位置，并把它们传递到我的d3.js图中。这是由于我将使用的数据集的大小，这意味着我不能依靠客户端不冻结，如果完全的力量计算是在客户端完成的。我有JSON格式的位置，并使用了线性刻度，以便使它们在d3.js中有用。return posY(d.y); }); 为什么on事件不设置我的节点的初始位置或者，预计算d3.js力有向图的稳定状态的好方法是什

浏览 3提问于2016-04-18得票数 6

回答已采纳

1回答