Skip to content

Instantly share code, notes, and snippets.

@kamiua

kamiua/index.html Secret

Created March 3, 2017 10:11
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 kamiua/6379dfb73a6dbe3cd2609d6657b53270 to your computer and use it in GitHub Desktop.
Save kamiua/6379dfb73a6dbe3cd2609d6657b53270 to your computer and use it in GitHub Desktop.
Download ZIP
d3-axis ticks transition sometimes produces console errors when used with tickValues
Raw
index.html
<!DOCTYPE html>
<button style="position:absolute;top:10px;left:10px;">Click Me</button>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var randomUniform = d3.randomUniform(200, 400),
randomInteger = function() { return Math.ceil(randomUniform()); };
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.domain(d3.range(15).map(randomInteger))
.range([0, width])
.padding(0.1);
var xAxis = d3.axisBottom(x);
var xGroup = g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
d3.select("button").on("click", function() {
var domain = d3.range(15).map(randomInteger);
var tickValues = d3.range(3).map(randomInteger);
x.domain(domain);
xAxis.tickValues(tickValues);
xGroup.transition().duration(750).call(xAxis);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment