Skip to content

Instantly share code, notes, and snippets.

@nick3499

nick3499/index.html

Forked from d3byex/index.html
Last active March 3, 2017 16:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nick3499/f736c9ae0655f62d1c2b74f06db21a62 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nick3499/f736c9ae0655f62d1c2b74f06db21a62 to your computer and use it in GitHub Desktop.
Download ZIP
D3byEX 4.5: Axis with Style (Adapted to D3.js v4)
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<head>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<meta name="description" content="D3.js v4, .axisBottom, .scaleLinear,
axis bottom, selection multi" />
</head>
<body>
<script>
var data = [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85, 101, 95, 105,
114, 150, 180, 210, 125, 100, 71, 75, 72, 67];
var maxValue = d3.max(data);
var width = 500, height = 500;
var svg = d3.select('body')
.append('svg')
.attrs({width: width, height: height}); // selection multi
var scale = d3.scaleLinear() // v4
.domain([0, maxValue])
.range([0, width]); // clipped
var axisGroup = svg.append('g');
var axis = d3.axisBottom() // v4
.scale(scale)
.tickSize(10)
.tickPadding(6);
var axisNodes = axisGroup.call(axis);
</script>
</body>
</html>
@nick3499
Copy link
Author

nick3499 commented Feb 28, 2017 •
edited
Loading

  • current D3.js version was https://d3js.org Version 4.6.0. Copyright 2017 Mike Bostock available at http://d3js.org/d3.v4.js
  • Both d3.scaleLinear() and d3.axisBottom() are exclusive to D3 v4.
  • d3.attr() calls are separate, e.g. .attr("fill", "none")
  • section of code commented out came from the D3.js v3 based script.
  • added calls for d3.tickSize() and d3.tickPadding()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment