javascript - D3 axis overlap - Stack Overflow

admin管理员组

文章数量:1333685

/

var xAxis = d3.axisBottom(x)
    .ticks(15)
  .tickSizeInner(25)

So the issue is that labels of the X axis overlap, Mon 31 and Novemeber. From what I can see the space between axes for those two dates is smaller and in result the labels overlap.
Can I solve this somehow or it's a library issue?

The project where that chart is used in has dateselectors for start and end date and also a dropdown for date granularity(daily, monthly, yearly) which means that I can't use a fixed number of ticks and specific format.

.ticks(15)

is used here just for the demo, in the project it's like this

Math.min(data.length, Math.floor(width / 100)) // 100 being the 'min' tick width

---

https://jsfiddle/q5vwgxgz/3/

var xAxis = d3.axisBottom(x)
    .ticks(15)
  .tickSizeInner(25)

So the issue is that labels of the X axis overlap, Mon 31 and Novemeber. From what I can see the space between axes for those two dates is smaller and in result the labels overlap.
Can I solve this somehow or it's a library issue?

The project where that chart is used in has dateselectors for start and end date and also a dropdown for date granularity(daily, monthly, yearly) which means that I can't use a fixed number of ticks and specific format.

.ticks(15)

is used here just for the demo, in the project it's like this

Math.min(data.length, Math.floor(width / 100)) // 100 being the 'min' tick width

---

• javascript
• d3.js

Share Improve this question Follow edited Sep 14, 2017 at 9:23 Daniel Verejan asked Sep 14, 2017 at 8:58 Daniel VerejanDaniel Verejan 9111 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

One solution (out of many) is specifically setting the tick format...

.tickFormat(function(d) {
    return d3.timeFormat("%b %d")(d)
})

And spreading the ticks, for instance using timeDay:

.ticks(d3.timeDay.every(4))

Here is your code with those changes:

var data = [{
  "Date": "2016-09-30",
  "Jobs": 0,
}, {
  "Date": "2016-10-01",
  "Jobs": 0,
}, {
  "Date": "2016-10-02",
  "Jobs": 1,
}, {
  "Date": "2016-10-03",
  "Jobs": 0,
}, {
  "Date": "2016-10-04",
  "Jobs": 3,
}, {
  "Date": "2016-10-05",
  "Jobs": 0,
}, {
  "Date": "2016-10-06",
  "Jobs": 2,
}, {
  "Date": "2016-10-07",
  "Jobs": 0,
}, {
  "Date": "2016-10-08",
  "Jobs": 0,
}, {
  "Date": "2016-10-09",
  "Jobs": 4,
}, {
  "Date": "2016-10-10",
  "Jobs": 6,
}, {
  "Date": "2016-10-11",
  "Jobs": 1,
}, {
  "Date": "2016-10-12",
  "Jobs": 2,
}, {
  "Date": "2016-10-13",
  "Jobs": 0,
}, {
  "Date": "2016-10-14",
  "Jobs": 0,
}, {
  "Date": "2016-10-15",
  "Jobs": 0,
}, {
  "Date": "2016-10-16",
  "Jobs": 3,
}, {
  "Date": "2016-10-17",
  "Jobs": 2,
}, {
  "Date": "2016-10-18",
  "Jobs": 3,
}, {
  "Date": "2016-10-19",
  "Jobs": 3,
}, {
  "Date": "2016-10-20",
  "Jobs": 1,
}, {
  "Date": "2016-10-21",
  "Jobs": 0,
}, {
  "Date": "2016-10-22",
  "Jobs": 0,
}, {
  "Date": "2016-10-23",
  "Jobs": 4,
}, {
  "Date": "2016-10-24",
  "Jobs": 2,
}, {
  "Date": "2016-10-25",
  "Jobs": 6,
}, {
  "Date": "2016-10-26",
  "Jobs": 1,
}, {
  "Date": "2016-10-27",
  "Jobs": 1,
}, {
  "Date": "2016-10-28",
  "Jobs": 0,
}, {
  "Date": "2016-10-29",
  "Jobs": 3,
}, {
  "Date": "2016-10-30",
  "Jobs": 5,
}, {
  "Date": "2016-10-31",
  "Jobs": 0,
}, {
  "Date": "2016-11-01",
  "Jobs": 3,
}, {
  "Date": "2016-11-02",
  "Jobs": 1,
}, {
  "Date": "2016-11-03",
  "Jobs": 0,
}, {
  "Date": "2016-11-04",
  "Jobs": 0,
}, {
  "Date": "2016-11-05",
  "Jobs": 1,
}, {
  "Date": "2016-11-06",
  "Jobs": 4,
}, {
  "Date": "2016-11-07",
  "Jobs": 5,
}, {
  "Date": "2016-11-08",
  "Jobs": 6,
}, {
  "Date": "2016-11-09",
  "Jobs": 2,
}, {
  "Date": "2016-11-10",
  "Jobs": 1,
}, {
  "Date": "2016-11-11",
  "Jobs": 0,
}, {
  "Date": "2016-11-12",
  "Jobs": 2,
}, {
  "Date": "2016-11-13",
  "Jobs": 2,
}, {
  "Date": "2016-11-14",
  "Jobs": 1,
}, {
  "Date": "2016-11-15",
  "Jobs": 3,
}, {
  "Date": "2016-11-16",
  "Jobs": 0,
}, {
  "Date": "2016-11-17",
  "Jobs": 1,
}, {
  "Date": "2016-11-18",
  "Jobs": 0,
}, {
  "Date": "2016-11-19",
  "Jobs": 0,
}, {
  "Date": "2016-11-20",
  "Jobs": 1,
}, {
  "Date": "2016-11-21",
  "Jobs": 2,
}, {
  "Date": "2016-11-22",
  "Jobs": 2,
}, {
  "Date": "2016-11-23",
  "Jobs": 4,
}, {
  "Date": "2016-11-24",
  "Jobs": 0,
}, {
  "Date": "2016-11-25",
  "Jobs": 0,
}]
var parseTime = d3.timeParse("%Y-%m-%d");
data.forEach(function(d) {
  d.Date = parseTime(d.Date);
});

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 50,
    left: 50
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleTime()
  .rangeRound([0, width]);
var y = d3.scaleLinear()
  .rangeRound([height, 0]);

var line = d3.line()
  .x(function(d) {
    return x(d.Date);
  })
  .y(function(d) {
    return y(d.Jobs);
  });

x.domain(d3.extent(data, function(d) {
  return d.Date;
}));
y.domain(d3.extent(data, function(d) {
  return d.Jobs;
}));

var xAxis = d3.axisBottom(x)
  .ticks(d3.timeDay.every(4))
  .tickFormat(function(d) {
    return d3.timeFormat("%b %d")(d)
  })
  .tickSizeInner(25)
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .select(".domain")
  .remove();

g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
  .attr("fill", "#000")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("Jobs");

g.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", 1.5)
  .attr("d", line);

<svg width="1200" height="500"></svg>
<script src="https://d3js/d3.v4.min.js"></script>

However, have in mind that in D3 time scales were not created having customizations in mind. Their behaviour is dynamic. Therefore, You'll have to fix each specific problem using ad hoc solutions.

Or you may rotate the label for ticks by 90 degrees:

d3.selectAll(".x-axis .tick text")
  .attr("transform", "translate(-30, 50)rotate(-90)")

working code here

本文标签： javascriptD3 axis overlapStack Overflow