axis.ticks() as a getter returns an array, not a number.
var ticksCount = yAxis.ticks();
... returns the number of ticks (which is
10) as an array (
). Then, when you try to add 1 to this array, look what happens:
console.log( + 1)
You end up with 101 ticks (note: 101 here is actually a string, not a number). That's why you said that "the y axis is now blurred". It's not blurred, you just have a humongous amount of ticks.
You may think that you should do:
var ticksCount = yAxis.ticks(); //get the element -------------^ yAxis.ticks(ticksCount + 1);
But that will make no difference: you will have more ticks in the axis, but the minimum/maximum in the axis will be the same.
Solution: change the domain instead:
yScale = d3.scale.linear() .range([height - margin.top, margin.bottom ]).domain([0, max_y * 1.05]) //add 5% to the top ----^
- d3.js - adding One additional tick for the Y axis does not work
- Why does this code work for counting one item in a list but not the others?
- The mouseover event for D3.js does not work in Leaflet
- Why the maximum variable take the d3.max() value but the minimum one d3.min() does not work properly?
- Why does my JSON update for one API but not the other?
- I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error
- How to display the value for the final tick on axis in D3?
- Tooltip does not appear for the overlapped circles in d3.js
- Why does this syntax work over the other one with d3.json requests?
- bisectLeft function does not work if the second parameter is numerical
- d3 js transition over the array of rectangles does not work
- d3.js node translation does not work when changed the node to image
- Updating the table multiple times using D3 does not work
- For loop does not work in D3.js
- d3.js Stacked Bar Chart working for one dataset but not the other
- d3 axis not showing tick label if two ticks have the same value
- The axis label at x=0 does not show up
- .on("drag", function()) and .on("contextmenu", function()) does not work when used on the same code
- d3js: How does the "magic" work with fill on hover for a barchart plot?
- D3: After adding a node, drag is attached but it does not work
- d3 js axis does not match the actual data
- hovering does not work with all elements of the same class in d3.js
- D3.js - Adding a tick value on the x axis (date format)
- How does the following code get away with not defining initial x and y coordinates for nodes?
- D3js Ordinal Axis does not show all the ticks
- NVD3 chart top margin ensuring space for chart title does not work
- Importing local json file using d3.json does not work
- D3: Is it possible to zoom+pan one axis and only pan the other?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
More Query from same tag
- Using d3.js to create a heatmap, having issues with color
- How to load multiple csv files and use them mixed with each other
- Understanding D3 TopoJSON transformations
- d3.js rotate transform for webkit and mozkit
- disable scroll for a div with SVG
- Creating a table with D3
- D3.js - did the transition behavior changed in v4 ?
- what is the equivalent group code for nest and group functions in D3 V6
- numberDisplay in dc.js that shows the total sum of values in the row chart
- d3js: Calling different data from the same CSV - transitions
- How to color the text labels individually on an axis in d3?
- read width of d3 text element
- D3.js Choropleth using data in JSON
- how to use json array in d3 graph
- d3 force layout link position in node
- D3 Brush + Zoom: Fix update delay (see GIF)
- D3 line graph appearing as area graph
- D3 how to remove tick dots from opaque scale
- clicking a node in d3 from a button outside the svg
- D3 scale not mapping colors to values
- d3js tooltip is positioned incorrectly on bootstrap web
- Avoid overlap/ entangling in d3.js
- Using D3.js, How can I detect when a point on an animating line is reached?
- Which web charting libraries export well with Wicked PDF?
- Looking for a D3 way of drawing a mean line for a multil-series line chart
- D3 js click triggering for all the past clicks together
- D3.js AreaChart alignment issues