Question

我使用D3 v4创建折线图，标签X重叠。

// Add the X Axis
var xAxis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickValues(data.map(d=>d.date))
.tickFormat(d3.timeFormat("%d/%m %H:%M")))
.selectAll("text")
.attr("transform", "rotate(90)")
.attr("dy", ".35em")
.attr("y", 0)
.attr("x", 9)
.style("text-anchor", "start");

完整代码在此处：JSFiddle

Answer 1

不要使用给定的刻度值。为了做到这一点，图表右端附近的数据点太靠近了。只需删除此行

即可

/*MENUBAR*/

#nav {
    background-color: #999999;
    position: absolute;
    top:0px;
    padding-left: 85px;
    height: 50px;
    overflow: hidden;
    margin-top: -5px;
    left: -90px;
}

ul {
  list-style-type: none;
  margin: 0;
  font-size: 0;
  padding: 5px;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #808080;
}

.first li {
  display: inline-block;
}

li a {
    display:block;
    text-decoration: none;
    text-align: center;
    padding: 15px 20px;
    color: white;
    cursor:pointer;
    font-size: 16px;
}

li a:hover {
    background-color:#333333;
}
.active {
    background-color:#333333;
}

/* LOG IN*/

form {
    float:right;
    font-family: Arial, Helvetica, sans-serif;
}

.login {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 50%;
    display: inline-block;
}

input{
    font-size: 90%;
}

如果工具提示很重要，请在工具提示中显示确切的时间。

D3 - X轴标签重叠

1 个答案: