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

代码语言：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;
        }
    `)
);

const eventMarkup = util.svg`
    <rect @selector="dateBackground"/>
    <text @selector="date"/>
    <path @selector="body"/>
    <a class="event-link" @selector="link">
        <text @selector="label"/>
    </a>
`;

class Event extends dia.Element {
    defaults() {
        return {
            ...super.defaults,
            type: 'Event',
            z: 1,
            attrs: {
                root: {
                    magnetSelector: 'body'
                },
                body: {
                    d: 'M 10 0 H calc(w-10) A 10 10 0 0 1 calc(w) 10 V calc(h-30) H 10 A 10 10 0 0 1 0 calc(h-40) V 10 A 10 10 0 0 1 10 0 Z',
                    strokeWidth: 2,
                    rx: 5,
                    ry: 5,
                    fill: colors[1],
                    stroke: colors[0],
                },
                label: {
                    fontFamily: 'sans-serif',
                    fontSize: 15,
                    x: 'calc(w/2)',
                    y: 'calc(h/2 - 15)',
                    textAnchor: 'middle',
                    textVerticalAnchor: 'middle',
                    lineHeight: 24,
                    textWrap: {
                        width: -10,
                        height: null
                    },
                    fill: colors[6],
                },
                date: {
                    fontFamily: 'sans-serif',
                    fontSize: 14,
                    x: 'calc(w - 30)',
                    y: 'calc(h - 15)',
                    textAnchor: 'middle',
                    textVerticalAnchor: 'middle',
                    fill: colors[5]
                },
                dateBackground: {
                    width: 60,
                    height: 40,
                    x: 'calc(w - 60)',
                    y: 'calc(h - 40)',
                    stroke: colors[2],
                    fill: colors[6],
                    strokeWidth: 1,
                    rx: 10,
                    ry: 10
                },
                link: {
                    xlinkShow: 'new',
                    cursor: 'pointer'
                }
            }
        };
    }

    preinitialize() {
        this.markup = eventMarkup;
    }
}

shapes.Event = Event;

function createEvent(text, date, url) {
    return new Event({
        size: { width: 150, height: 110 },
        year: date.getFullYear(),
        attrs: {
            label: {
                text,
            },
            date: {
                // Format date as "Jan 1"
                text: date.toLocaleString('default', { month: 'short', day: 'numeric' }),
            },
            link: {
                xlinkHref: url
            }
        }
    });
}

function createLink(source, target) {
    return new shapes.standard.Link({
        source: { id: source.id },
        target: { id: target.id },
        z: 2,
        attrs: {
            line: {
                stroke: colors[4],
                strokeWidth: 3,
            }
        }
    });
}

const events = [

    // 2015

    // Introducing OpenAI
    // December 11, 2015 — Announcements
    // https://openai.com/blog/introducing-openai/
    createEvent('Introducing OpenAI', new Date('12/11/2015'), 'https://openai.com/'),
    // 2016

    // OpenAI Gym Beta
    // April 27, 2016 — Research
    // https://openai.com/blog/openai-gym-beta/
    createEvent('OpenAI Gym Beta', new Date('04/27/2016'), 'https://openai.com/'),

    // Universe
    // December 5, 2016 — Research
    // https://openai.com/blog/universe/
    createEvent('Universe', new Date('12/05/2016'), 'https://openai.com/'),

    // 2017

    // Proximal Policy Optimization
    // July 20, 2017 — Research, Milestones
    // https://openai.com/blog/openai-baselines-ppo/
    createEvent('Proximal Policy Optimization', new Date('07/20/2017'), 'https://openai.com'),
    // Dota 2
    // August 11, 2017 — Research, OpenAI Five
    // https://openai.com/blog/dota-2/
    createEvent('Dota 2', new Date('08/11/2017'), 'https://openai.com'),

    // 2018

    // Preparing for Malicious Uses of AI
    // February 20, 2018 — Research
    // https://openai.com/blog/preparing-for-malicious-uses-of-ai/
    createEvent('Preparing for Malicious Uses of AI', new Date('02/20/2018'), 'https://openai.com'),
    // OpenAI Charter
    // April 9, 2018 — Announcements, Milestones
    // https://openai.com/blog/openai-charter/
    createEvent('OpenAI Charter', new Date('04/09/2018'), 'https://openai.com/'),
    // Learning Dexterity
    // July 30,.........完整代码请登录后点击上方下载按钮下载查看