The default position of any
(0, 0) and
.orient('left') means that the axis is placed to the left of
(0, 0), which is outside the scene. You need to manually set the
transform on the
g element which contains the axis:
yAxis.orient('left'); svg.append('g') .attr('class', 'y axis') .attr('transform', 'translate(' + [margins.left, margins.top] + ')'); .call(yAxis);
With the recommended form you are missing a "drawing area"
// have an SVG that is the drawing area width/height plus margins // you don't show your mark-up but it looks like your code is ok // append a `g` element and translate it to your margins // you'll do all your drawing to the g element svg = svg.append("g") .attr("transform", "translate(" + margins.left + "," + margins.top + ")"); // append axis to this g // your y-axis will be in the margin, so adjust margins.left to fit svg.append("g") .attr("class", "y axis") .call(yAxis);
- d3 axis rendering outside the SVG
- clicking a node in d3 from a button outside the svg
- SVG not drawn outside the visible area of Google Maps
- Rotate element thrown outside the SVG
- Why isn't my text displaying in the svg axis label? (D3 Margin Convention)
- Using d3.behavior.drag, How to keep a drag image visible outside of the svg element
- Why animated d3 svg line is not synchronized with the axis shift in IE9 but synchronized in IE11 and Chrome?
- plottable.js bar graph rendering off the axis
- How do I manipulate the axis of a svg chart?
- d3.js: SVG bars appear outside the svg area
- How to move the x axis to the bottom of a svg
- Is there any way to customize the color of text on an axis on an svg element?
- Resize SVG contents based on the result of rendering
- d3 image is rendering outside the table
- How to access the DOM element that correlates to a D3 SVG object?
- d3.js: Align text labels between ticks on the axis
- How do I get the width of an svg element using d3js?
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- How can I get the D3.js axis ticks and positions as an array?
- D3: Is it possible to zoom+pan one axis and only pan the other?
- SVG not rendering properly as a backbone view
- D3 how to change the width and length of SVG
- In d3, how to get the interpolated line data from a SVG line?
- Using ViewBox to resize svg depending on the window size
- SVG element loses event handlers if moved around the DOM
- D3 grouped bar chart: How to rotate the text of x axis ticks?
- how to set the domain and scale on an axis on a nvd3.js multiBarChart
- nvd3.js : unable to bind onClick event with the data points in the svg
- maximum number of svg elements for the browser in a map
- mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
More Query from same tag
- Adding filtering, searching and pagination to realtime streaming table
- D3 the x axis positions in wrong way
- TypeError/Undefined when adding conditional formatting to my bar chart
- CSS transform-origin not working for svg in safari
- Moving all nodes the same time including links?
- D3.js V4 Force directed Graph wtih Labels plus zoom
- D3 Added Circles to a MultiLine Chart - Circles on top of Circles
- How to calculate the x and y coordinates of individual points within a radial line?
- How to make plotting possible on x-axis lines only? (d3.js)
- d3 circle onclick event not firing
- d3.selectAll to change styles by class in v4
- jQuery: Selecting the second element when selectors are same using :eq
- How to import d3 library properly in node.js?
- D3 time axis - why do tick marks seem to be invisible by default?
- How to use d3 range scale?
- Incorrect color selection of regions in the map
- D3js drag&drop an object and detect where it is dropped.
- d3.js - set links size to a force layout
- d3.js update bar chart labels after sorting data
- c3 (v4) scatter plot with two sets of data
- Changing radius of multiple points on D3 scatterplot based on condition
- Understanding a d3 Multi-Foci Force Layout
- D3.js: alternative to selecting elements by data attributes?
- D3.js executing in different manner
- Hyperlinks in this NVD3 example
- d3 autospace overlapping tick labels
- d3.js - update a GeoJSON element