D3轴重叠

Question

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

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

因此，问题在于X轴的标签在星期一31和Novemeber重叠。 从我可以看到，这两个日期的轴间距较小，结果标签重叠。
我能以某种方式解决这个问题还是图书馆问题？

使用该图表的项目具有用于开始和结束日期的日期选择器，以及用于日期粒度（每日，每月，每年）的下拉列表，这意味着我不能使用固定数量的刻度和特定格式。

.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)")

这里的工作代码