Skip to content

Instantly share code, notes, and snippets.

@lhstock
Created February 27, 2017 06:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lhstock/20224cb323481990de9c01ca1ad76c63 to your computer and use it in GitHub Desktop.
Save lhstock/20224cb323481990de9c01ca1ad76c63 to your computer and use it in GitHub Desktop.
scaleBand()
license: mit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
</body>
<script>
var width = 500,height = 500,padding = {left:20,right:20};
var data = ["tang","song","yuan","ming","qing"];
var axis_length = width - padding.left - padding.right;
//d3.scaleImplicit = 200;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
var scale = d3.scaleBand()
.domain(data)
// .range([0,axis_length-2])
// .round(true)
.rangeRound([0,axis_length])
.paddingInner(0.5)
.paddingOuter(0.5)
.padding(0.5)
.align(0.5)
var axis = d3.axisBottom()
.scale(scale)
.ticks(5)
svg.append("g").call(axis).attr("transform","translate("+ (padding.left) +","+(height - 100)+")");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment