joint实现s形时间轴大事记代码-html代码-BFW代码库

joint实现s形时间轴大事记代码

代码语言：html

所属分类：其他

代码描述：joint实现s形时间轴大事记代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
  
<style>
#paper-container {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;
}

#logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #ffffff;
  border: 1px solid #d3d3d3;
  padding: 5px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}
</style>


  
  
</head>

<body translate="no">
<div id="paper-container"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.3.6.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
      <script >
const { dia, shapes: defaultShapes, util, connectors } = joint;

const shapes = { ...defaultShapes };

// Paper

const paperContainer = document.getElementById("paper-container");

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
  model: graph,
  cellViewNamespace: shapes,
  width: "100%",
  gridSize: 20,
  async: true,
  sorting: dia.Paper.sorting.APPROX,
    defaultConnector: { name: 'curve' },
    defaultConnectionPoint: {
        name: 'anchor'
    },
    background: {
        color: '#fff'
    }
  
});

paperContainer.appendChild(paper.el);

// Color palette
const colors = ['#557ac5','#7593d0','#d9e1f2','#ecf0f9','#b73e66','#2CA58D', '#FEFEFE'];


// Underline hyperlinks on hover
paper.svg.appendChild(
    V.createSVGStyle(`
        .event-link:hover text {
            text-decoration: underline.........完整代码请登录后点击上方下载按钮下载查看