D3.js selectors d3.select

by Imabot

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<h1>Axes with D3.js</h1>


<div id="bar-chart"></div>

CSS

#bar-chart svg { background-color: Gainsboro; }
#bar-chart .bars { fill: LightSkyBlue; }

JavaScript

// Create our SVG container
var svg = d3.select("#bar-chart")
            .append("svg")
            .attr('width', 400)
            .attr('height', 200);



// X Scale
var xScale = d3.scaleLinear()
    			.domain([0, 10]) 
    			.range([30, 370]);

// Bottom axis
svg.append('g')
	.attr('transform', 'translate(0, 180)')
	.call(d3.axisBottom(xScale));

// Top axis
svg.append('g')
	.attr('transform', 'translate(0, 20)')
	.call(d3.axisTop(xScale));




// Y Scale
var yScale = d3.scaleLinear()
    			.domain([0, 50]) 
    			.range([30, 170]);

    
// Left axis
svg.append('g')
	.attr('transform', 'translate(20, 0)')
	.call(d3.axisLeft(yScale).ticks(5));
   
// Right axis   
svg.append('g')
	.attr('transform', 'translate(380, 0)')
	.call(d3.axisRight(yScale).ticks(10))