CODEWITHSUNDEEP
javascriptd3.js
ZZ__zz
ZZ__zz

Reputation: 77

d3.js axis add tick value

I am new in d3.js.Now I have a question that how to add ticks in the start postion and end position.

So how do I add 1 in first tick and 99 in last tick? I cannot figure out how.

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="d3">

    </div>

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>
        let margin = {top: 40, right: 80, bottom: 40, left: 80 },
            width = 600 - margin.right - margin.left,
            height = 360 - margin.top - margin.bottom;

        let svg = d3.select('#d3')
            .append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append('g')
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        let xScale = d3.scaleLinear()
            .domain([1, 99])
            .range([0, width]);
        
        let xAxisGenerator = d3.axisBottom(xScale);

        let xAxis = svg.append('g')
            .call(xAxisGenerator);


    </script>
</body>
</html>

Upvotes: 4

Views: 437

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

First, you can get the default ticks with d3.ticks(), which takes the form:

  d3.ticks(start,stop,number)

The default number of ticks is 10 for an axis, we can use that. Then you plug in the minimum and maximum value in your domain as the start and stop values, and then you get the default tick values in an array. Now we can add the minimum and maximum values in your domain to this array, perhaps something like:

    let ticks = [...xScale.domain(),...d3.ticks(...xScale.domain(),10)]

My use of the spread operator (...) means this won't be IE compatible, but it's not hard to rework

Then we just pass these ticks to the axis:

    let xAxisGenerator = d3.axisBottom(xScale)
       .tickValues(ticks);

And now we have the original ticks plus ones for 1 and 99.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d3">

    </div>

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>
        let margin = {top: 40, right: 80, bottom: 40, left: 80 },
            width = 600 - margin.right - margin.left,
            height = 360 - margin.top - margin.bottom;

        let svg = d3.select('#d3')
            .append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append('g')
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        let xScale = d3.scaleLinear()
            .domain([1, 99])
            .range([0, width]);
        
        let ticks = [...xScale.domain(),...d3.ticks(...xScale.domain(),10)]
        
        let xAxisGenerator = d3.axisBottom(xScale)
           .tickValues(ticks);

        let xAxis = svg.append('g')
            .call(xAxisGenerator);

   
        
       
       
       
    </script>
</body>
</html>

Upvotes: 3

Related Questions