D3轴重叠

Question

https://jsfiddle.net/q5vwgxgz/3/

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

所以问题是X轴的标签重叠，Mon 31和Novemeber。 从我可以看到，这两个日期的轴之间的空间较小，结果标签重叠 我可以以某种方式解决这个问题，或者这是一个库问题吗？

使用该图表的项目包含开始日期和结束日期的日期选择器以及日期粒度下拉列表（每日，每月，每年），这意味着我无法使用固定数量的刻度和特定格式。 / p>

.ticks(15)

这里仅用于演示，在项目中就像这样

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

Answer 1

一个解决方案（多个解决方案）专门设置刻度线格式...

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

并传播刻度线，例如使用timeDay：

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

以下是包含这些更改的代码：

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.org/d3.v4.min.js"></script>

但是，请记住，在D3中，时间尺度并未考虑到自定义。他们的行为是动态的。因此，您必须使用临时解决方案来解决每个特定问题。

Answer 2

或者您可以将标签旋转90度：

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

工作代码here