D3轴重叠

Question

D3轴重叠

5

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

所以问题在于X轴的标签重叠，Mon 31和November。从我所看到的来看，这两个日期之间的轴距较小，导致标签重叠。
我能解决这个问题吗，还是这是一个库的问题？

那个图表所在的项目有起始日期和结束日期的日期选择器，还有一个下拉框可以选择日期的粒度（日、月、年），这意味着我不能使用固定数量的刻度和特定的格式。

.ticks(15)

这里只是为了演示而使用，项目中的情况是这样的

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

- Daniel Verejan

2个回答

2

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

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

working code here

- Cyril Cherian

不幸的是，设计要求它们在同一行中 :) 感谢您的建议。 - Daniel Verejan

好的，没问题，这可能对寻找类似东西的人有所帮助。 - Cyril Cherian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gerardo Furtado · Accepted Answer

其中一个解决方案是专门设置刻度格式...

.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中，时间刻度并没有考虑自定义。它们的行为是动态的。因此，您需要使用特定的临时解决方案来解决每个具体的问题。