You are translating the axis all the way down to the height of the SVG. You have to leave some margin.
For instance, this is your code right now (I'm simplifying your domain):
var wl = 550; var hl = 150; var svgl = d3.select("body").append("svg") .attr("width", wl) .attr("height", hl); var xscalel1 = d3.scaleLinear() .domain([0, 100]) .range([0, wl-30]); svgl.append("g") .attr("transform", "translate(0," + hl + ")") .call( d3.axisBottom(xscalel1) );
Nothing will show up after clicking "run code snippet", just a blank space. You can't see anything, because this:
.attr("transform", "translate(0," + hl + ")")
Is moving the axis to the height (hl) of the SVG, that is, to its end.
Now let's see the same code with some margin, like this:
.attr("transform", "translate(0," + (hl - 20) + ")")
That way, we are moving the axis to 20 pixels before the end (height) of the SVG.
And here is the result, now you can see the axis:
var wl = 550; var hl = 150; var svgl = d3.select("body").append("svg") .attr("width", wl) .attr("height", hl); var xscalel1 = d3.scaleLinear() .domain([0, 100]) .range([0, wl-30]); svgl.append("g") .attr("transform", "translate(0," + (hl - 20) + ")") .call( d3.axisBottom(xscalel1) );
- How can I implement 2 x axis in D3 version 4
- D3 Text label for y axis in version 4
- D3 version 4 AXIS
- How to modify Y axis ticks from 45.000.000 to 45M on D3.js version 7?
- d3 axis labeling
- rotate x axis text in d3
- What is 'd3.svg.axis()' in d3 version 4?
- How to update axis using d3.js
- Remove end-ticks from D3.js axis
- d3.js: Align text labels between ticks on the axis
- dealing with dates on d3.js axis
- D3.js: Using images (with filenames specified in data) as tick values on axis
- Create a D3 axis without tick labels
- How can I get the D3.js axis ticks and positions as an array?
- d3.js axis labels - color not changing
- D3: Is it possible to zoom+pan one axis and only pan the other?
- d3 zoom and pan upgrade to version 4
- D3 - using strings for axis ticks
- converting numbers on y axis to string with K for thousand d3.js
- d3.js & nvd3.js axis and label precision formatting
- How do I make a custom axis formatter for hours & minutes in d3.js?
- d3 time scale x axis with unix timestamp
- Custom tick size on axis (d3js)
- D3.js -- Ordinal scale (version 3 to version 4)
- Syntax for axis transition in svg/d3
- D3 grouped bar chart: How to rotate the text of x axis ticks?
- NVD3/D3 change y axis minimum value
- Display only whole values along y axis in d3.js when range is 0-1 or 0-2
- how to set the domain and scale on an axis on a nvd3.js multiBarChart
- D3 line chart axis text labels in multi line
More Query from same tag
- D3Js Bar Chart Bars Starting Way After beginning of X-Axis
- this.setAttribute is not a function when using D3's .attr method
- d3.js Zoomable Sunburst visualization from self-referencing CSV input
- Network diagram
- One slider, two graphs, with Rickshaw and D3.js
- How to change the existing html text in a D3 rect?
- Datamaps hover pop up
- Drag behavior for nested g elements
- TypeError: Cannot call method 'forEach' of undefined " in d3 js on MVC Razor
- Why the attrTween doesn't work
- d3 promise start immediatelly - does not wait for data
- Testing d3 (and other SVG based) Web Applications
- d3 bar chart selectAll before appending
- How to select multiple selectors with selectAll?
- d3js Force Layout Not Working As Expected
- Generate D3 Pie Chart of api data
- How to show nested JSON value in table header & row
- D3js pie animation on load not working
- Create d3.js graph from data on mongodb server
- Looking for a better way to alter the color of axis components in d3.js v4
- d3 second graph kills first one's force layout
- How do I output subtasks to the diagram d3.js?
- Add a SVG object on a timescale axis in D3?
- Draggable interactive graphic element using D3
- how to define the parent- children relation in D3?
- Issue with scope in d3.text function
- Avoid collision between nodes and edges in D3 force layout
- Binding color to data in d3
- how to use svg file for image source in D3
- Storing values for resuse while operating on a selection