Question

我要在d3.js的折线/面积图中显示以下数据：

它可以正常工作，但是由于某些原因，x轴会两次显示每个日期：

如何防止这种行为并强制d3.js在x轴上仅显示一次每个日期？这是我当前的代码：

var parseTime = d3.timeParse("%Y-%m-%d")
bisectDate = d3.bisector(function(d) { return d.date; }).left;

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

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

var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.value); });

data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.date; }));
if(full){
    y.domain([0, 1.1*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0));
} else {
    y.domain([0.98*d3.min(data, function(d) { return d.value; }), 1.02*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0.98*d3.min(data, function(d) { return d.value; })));
}

//if(chart_type === "line")
    g.append("path")
        .datum(data)
        .attr("fill", "#eee")
        .attr("d", area);
/*else
    g.append("path")
        .datum(data)
        .attr("fill", "#fa0d18")
        .attr("d", area);*/

var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

g.append("path")
    .data([data])
    .attr('fill', 'none')
    .attr('stroke', '#0d18fa')
    .attr("class", "line")
    .attr("d", valueline);

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickFormat(data.length > 95 ? d3.timeFormat("%y/%b") : d3.timeFormat("%b/%d")))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dy", ".25em")
    .attr("transform", "rotate(-45)");

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("Orders");

Answer 1

如果您删除tickFormat()，则会看到绘制的内容，这是12:00的中午刻度。

实施自己的多刻度格式器以防止出现此刻度。

https://github.com/d3/d3-time-format

防止d3.js在x轴上多次显示相同的日期

1 个答案: