Help in d3.js x-axis

JavaScript
#1

Tell us what’s happening:
Hey , there i 'm struggling in completing the d3.js projects , can you tell me whats going wrong here ,i am not able to see the x-axis

Your code so far

link to codepen`

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36.

Challenge: Visualize Data with a Scatterplot Graph

Link to the challenge:

#2

The axis is at the margin. You can’t see it unless you translate the xAxisGroup with .attr("transform", "translate(0, 50)"). vary the arguments to translate until it is where you need it to be.

1 Like
#3

i removed the translate to remove confusion , i checked the DOM structure in dev tools , it’s not present there.

#4

What do you mean it is not there? This is what it looks like with transform attribute in the devTool.

<g transform="translate(0, 50)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,6V0.5H400.5V6"></path></g>

And without transform attribute.

<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,6V0.5H400.5V6"></path></g>

It is even visible at the top border if you look closely.

#5

yes only that is there.
i tried the translate , the bottom axis is still not visible.

#6

there should be children of g element (g element with class “tick”).

#7

There is a reason the ticks are not there and that reason has nothing to do with the reason for not seeing the x-axis. The value of Time is a string. Does that mean anything to you? Replace:

  var xAxisScale = d3.scaleLinear()
    .domain([xMin, xMax])
    .range([0, width]);

with

var xAxisScale = d3.scaleLinear()
    .domain([10, 100])
    .range([0, width]);

You will see where the problem is.
You are using xMin and xMax which are both strings and you are passing them to linear scale.

1 Like
#8

Thank you very much .

#9

can have a look at this too, link ,i am still confused about the date thing . here it is in format of mm:ss , i’m getting invalid date format if i try to debug

#10