d3-message-sequence 项目使用教程

d3-message-sequence 项目使用教程

d3-message-sequenceDynamic message sequence charts for d3.项目地址:https://gitcode.com/gh_mirrors/d3/d3-message-sequence

1. 项目的目录结构及介绍

d3-message-sequence/
├── LICENSE
├── README.md
├── d3-msg-seq.js
└── d3-msg-seq.min.js

• LICENSE: 项目许可证文件，采用 MIT 许可证。
• README.md: 项目说明文件，包含项目的基本介绍和使用方法。
• d3-msg-seq.js: 项目的主要源代码文件，包含动态消息序列图的实现。
• d3-msg-seq.min.js: 项目的主要源代码文件的压缩版本，用于生产环境。

2. 项目的启动文件介绍

项目的启动文件是 d3-msg-seq.js 和 d3-msg-seq.min.js。这两个文件包含了动态消息序列图的实现代码。通常情况下，建议在开发环境中使用 d3-msg-seq.js，在生产环境中使用 d3-msg-seq.min.js。

示例代码

// 引入 d3 库
<script src="https://d3js.org/d3.v5.min.js"></script>
// 引入 d3-message-sequence 库
<script src="d3-msg-seq.js"></script>

// 设置消息序列图
var msg_seq = d3.messageSequence()
    .fade(5000); // 淡出时间，单位为毫秒

// 在 SVG 元素上绘制图表
d3.select('#container')
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .call(msg_seq);

3. 项目的配置文件介绍

项目没有专门的配置文件，所有的配置都是通过代码动态设置的。以下是一些常见的配置项：

添加消息

var msg = {
    from: "customer",
    to: "barrista1",
    msg: "place order"
};
msg_seq.addMessage(msg);

设置样式

g.actor line {
    stroke: lightgray;
    stroke-width: 1px;
}
g.message text {
    font-family: monospace;
}
g.message line {
    stroke: black;
    stroke-width: 2px;
}
g.message path {
    stroke: black;
    stroke-width: 2px;
}

通过以上配置，可以自定义消息序列图的样式和内容。

d3-message-sequenceDynamic message sequence charts for d3.项目地址:https://gitcode.com/gh_mirrors/d3/d3-message-sequence