Skip to content

Instantly share code, notes, and snippets.

@tomshanley
Last active Feb 13, 2020
Embed
What would you like to do?
Axis values transition
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
line {
stroke: black;
shape-rendering: crispEdges;
}
text {
text-anchor: middle;
}
</style>
</head>
<div id='chart'></div>
<form-group>
<label for="from">From:</label>
<input type="number" min="0" max="360" step="1" value="40" id="from">
<label for="to">To:</label>
<input type="number" min="0" max="360" step="1" value="50" id="to">
<button id="change-button" onclick="updateAxis()">Update</button>
</form-group>
<body>
<script>
console.clear()
let ticks1 = [ 1, 2, 3, 4, 5, 6, 7]
let width = 500
let margin = 50
let fromInput = d3.select("#from");
let toInput = d3.select("#to");
let format = d3.format(",.0f")
let xScale = d3.scaleLinear()
.domain(d3.extent(ticks1))
.range([0, width])
let xAxis = d3.axisBottom(xScale)
.tickValues(ticks1)
.tickFormat(format)
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin + margin)
.attr("height", margin + margin)
let axes = svg.append("g")
.attr("transform", "translate(" + margin + ", " + margin + ")")
let domain = axes.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", 0)
.attr("y2", 0)
let xAxisG = axes.append("g")
.attr("transform", axisTranslate(ticks1))
let ticks = xAxisG.selectAll(".tick")
.data(ticks1, d => d)
.enter()
.append("g")
.attr("class", "tick")
.attr("transform", tickTranslate)
ticks.append("line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -15)
.attr("y2", -19)
ticks.append("text")
.text(d => d)
function updateAxis(){
let currentTicks = ticks1
let fromNumber = fromInput.property("value")
let toNumber = toInput.property("value")
if (fromNumber > toNumber) {
let holder = toNumber
toNumber = fromNumber
fromNumber = holder
}
let newTicks = [fromNumber, toNumber]
// increase the number of ticks
let extentAllTicks = d3.extent(currentTicks.concat(newTicks))
let intermediateTicks = d3.range(extentAllTicks[0], extentAllTicks[1] + 1)
ticks = xAxisG.selectAll(".tick")
.data(intermediateTicks, d => d)
.join("g")
.attr("class", "tick")
.attr("transform", tickTranslate)
ticks.append("text")
.text(d => d)
ticks.append("line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -15)
.attr("y2", -19)
xScale
.domain(newTicks)
.range([0, width])
ticks.transition()
.duration(5000)
.attr("transform", tickTranslate)
ticks.selectAll('text, line')
.transition()
.duration(7000)
.style("opacity", function(d){
return (d >= newTicks[0] && d <= newTicks[1]) ? 1 : 0
})
}
function tickTranslate(d){
return "translate(" + xScale(d) + ", 15)"
}
function axisTranslate(data){
return "translate(" + xScale(data[0]) + ",0)"
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment