0.0.1 • Published 4 years ago

@yanqirenshi/d3.yabane v0.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

D3.js で 描く矢羽のマスタスケジュールです。

利用方法

HTML

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
   <script src="index.js"></script>
</head>
<body>
   <svg class="chart-yabane"></svg>
</body>

Javascript

<script>start(data);</script>

Config

{
    cycle: 'w',
    tick: 88,
    scale: {
        x: null,
        y: null,
        start: null,
        end: null,
        margin: {}
    },
    header: {
        h: 33,
        padding: 5,
        fill: {},
        stroke: {},
        font: {}
    },
    lane: {
        h: 33,
        w: null,
        padding: 5
    },
    yabane: {
        color: {},
        fill: {},
        stroke: {},
        font: {}
    }
};

scale

valdescription
x
y
start
end
margin

x

y

start

end

margin

  • before, after を指定します。
  • before=2, after=8 が初期値です。
  • 整数で指定します。

dates

lane

| val | description | |---------+-------------| | h | | | w | | | padding | | | fill | | | stroke | |

cycle

d, w, daily, weekly を指定します。

h

w

tick

padding

header

variabldescription
h
padding
font

yabane

variabldescription
color
fill
stroke
font

data

データ構造

データ

data=[ {矢羽} ... ]

矢羽

{
    "code": "YABANE001", 
    "name": "矢羽 001", 
    "start": new Date("2000-01-01")
    "end": new Date("2000-01-12"), 
    "detail": [ {矢羽}... ], 
}
@infinitebrahmanuniverse/nolb-_yan@everything-registry/sub-chunk-1037@zalastax/nolb-_yan
0.0.1

4 years ago