Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import "./App.css";
- import * as d3 from "d3";
- var link = d3.linkHorizontal();
- function Timeline({ yScale }) {
- const data = yScale.ticks(d3.utcMonth.every(0.5));
- const tickFormat = yScale.tickFormat(30, "%Y %b");
- return (
- <g>
- {data.map((el, i) => {
- return (
- <text x="0" y={Math.ceil(yScale(el))} class="small">
- {tickFormat(el)}
- </text>
- );
- })}
- <text />
- </g>
- );
- }
- function Nodes({ xScale, nodes }) {
- return (
- <g>
- {nodes.map((el, i) => {
- console.log("xScale(el): ", xScale(el));
- const [x1] = xScale(el);
- return (
- <React.Fragment>
- <text x={x1} y={20} class="small">
- {el}
- </text>
- <line
- x1={x1}
- y1={0}
- x2={x1}
- y2={900}
- strokeWidth={1}
- stroke="black"
- />
- </React.Fragment>
- );
- })}
- <text />
- </g>
- );
- }
- function Links({ xScale, yScale, links }) {
- return (
- <g>
- {links.map(el => {
- const [x1] = xScale(el.source);
- const [x2] = xScale(el.target);
- const y1 = Math.ceil(yScale(el.time));
- const t = link({
- source: [x1, y1],
- target: [x2, y1]
- });
- console.log("t", {
- source: [x1, y1],
- target: [x2, y1]
- });
- console.log("t: ", t);
- return (
- <React.Fragment>
- <path d={t} data-y={y1} stroke="black" marker-end="url(#arrow)" />
- <text x={x1 + (x2 - x1) / 2} y={y1}>
- {el.text}
- </text>
- </React.Fragment>
- );
- })}
- </g>
- );
- }
- const nodes = ["Email", "Share", "Endpoints", "Apps"];
- const links = [
- {
- time: new Date(2018, 5, 31),
- source: "Email",
- target: "Share",
- text: "document.txt"
- },
- {
- time: new Date(2018, 6, 20),
- source: "Endpoints",
- target: "Share",
- text: "file.txt"
- },
- {
- time: new Date(2018, 7, 20),
- source: "Endpoints",
- target: "Apps",
- text: "contract.txt"
- }
- ];
- function ArrowMarker({ id }) {
- return (
- <marker
- id={id}
- markerWidth="10"
- markerHeight="10"
- refX="0"
- refY="3"
- orient="auto"
- markerUnits="strokeWidth"
- >
- <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
- </marker>
- );
- }
- class App extends Component {
- render() {
- const { width, height } = this.props;
- var y = d3
- .scaleTime()
- .domain([new Date(2018, 0, 1), new Date(2019, 0, 2)])
- .rangeRound([0, height])
- .clamp(true);
- var x = d3
- .scaleQuantize()
- .domain([200, width])
- .range(nodes);
- return (
- <div className="App" style={{ margin: 20 }}>
- <svg width={width} height={height}>
- <defs>
- <ArrowMarker id={"arrow"} />
- </defs>
- <Nodes xScale={x.invertExtent} nodes={nodes} />
- <Timeline yScale={y} />
- <Links xScale={x.invertExtent} yScale={y} links={links} />
- </svg>
- </div>
- );
- }
- }
- export default App;
Add Comment
Please, Sign In to add comment