JSFiddle - React, Tailwind, and code Playground
by james0n
HTML
<head lang=en>
<style>
svg {
background: #27AE60;
font: 10px sans-serif;
}
.line {
fill: none;
stroke: rgba(255, 255, 255, 0.5);
stroke-dasharray:10, 10;
stroke-width: 5;
-webkit-svg-shadow: 0 0 15px #fff;
}
#arrow {
fill:rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {
top: 0,
right: 10,
bottom: 20,
left: 0
},
width = 666,
height = 333;
var drawing = 0;
var dashed = 0;
var npoints = 100;
var ptdata = [];
var line = d3.svg.line()
.interpolate("basis-open")
.x(function(d, i) {
return d[0];
})
.y(function(d, i) {
return d[1];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var svgagain = d3.select("body").select("svg")
.on("mousemove", function() {
})
.on("mousemove", mousemove)
.on("mousedown", mousedown)
.on("mouseup", mouseup);
defs = svg.append("defs")
defs.append("marker")
.attr({
"id": "arrow",
"viewBox": "0 -5 10 10",
"refX": 5,
"refY": 0,
"markerWidth": 3,
"markerHeight": 3,
"orient": "auto"
})
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("class", "arrowHead");
var path = svg.append("g")
.append("path")
...