JSFiddle - React, Tailwind, and code Playground

by Ibrahim Tanyalcin

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var svg = d3.select("body")
  .append("svg")
  .attr("width", 1800)
  .attr("height", 600)

function drawCandle(x, y, width, upper, body, lower){
  var path = d3.path()
  // path.moveTo(x + width/2, y)
  // path.lineTo(x + width/2, y + upper + body + lower)
  path.moveTo(x, y);
  path.lineTo(x + width, y);
  path.lineTo(x + width, y + upper);
  path.lineTo(x, y + upper);
  path.closePath();
  return path
}

var p = svg.append('path')
console.log(p.style('stroke-width'))

p.attr('d', drawCandle(200,100,20, 50, 100, 80))