score:3

Accepted answer

NOTE

Please make sure that the ideas in the graph are still clear if you use such a scale. Be aware that the lines are only built based on start and end point and are not "kinked" when traversing the break in the axis. When writing the answer I wasn't aware that you have a line graph and values below 200.

ANSWER

Assuming that you want to use a linear scale, you could e.g. try the following:

newScale = d3.scale.linear().domain([0,200,1000]).range([0,100,1000])

An axis could e.g. look like this:

var xAxis = d3.svg.axis()
  .scale(newScale)
  .orient('bottom');
d3.select("#someSVG").append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, " + 123 + ')')
  .call(xAxis);

Consequently, you'd get:

enter image description here

Looking at your codepen, you might want to try:

var y = d3.scale.linear().range([height,height * 9 / 10, 0]);

and then use as domain:

y.domain([0, 200, d3.max(data, function (d) {
        return d.close;
    })]);

so in this example, you allocate 1/10th of the height to the first 200.

enter image description here


Related Query

More Query from same tag