Question

我在x轴上的刻度与输入数据中的日期不对应。他们休息了一天。

我尝试过使用nice（），常数滴答，目前正在使用timeWeek。我还检查了域名，它与我的数据匹配。

我想要的输出是每个数据点都有一个勾号，即data.length，并且刻度标签应该等于数据[n]。日期。

以下是展示此问题的小提琴：https://jsfiddle.net/ab2uqfun/

var data = [
             {"date": "04/03/2017", "val": 3},
             {"date": "04/10/2017", "val": 6},
             {"date": "04/17/2017", "val": 7},
             {"date": "04/24/2017", "val": 5},
             {"date": "05/01/2017", "val": 8}
           ];

var parseTime = d3.timeParse("%m/%d/%Y");

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

var margin = {top: 50, right: 50, bottom: 50, left: 50}
          , width = window.innerWidth - margin.left - margin.right
          , height = window.innerHeight - margin.top - margin.bottom;

        var xScale = d3.scaleTime()
                .domain(d3.extent(data, function(d) {
            return d.date;
        }))
            .range([0, width]);

        var yScale = d3.scaleLinear()
            .domain([1, 9])
            .range([height, 0]);

    var plot = d3.line()
            .x(function(d) { return xScale(d.date); })
            .y(function(d) { return yScale(d.val); })
            .curve(d3.curveMonotoneX);

        var svg = d3.select("#container").append("svg")
            .attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale).ticks(d3.timeWeek.every(1)));

        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yScale));

        svg.append("path")
            .datum(data)
        .attr("id", "plot")
            .attr("class", "line")
        .attr("stroke", "#FF69B4")
            .attr("d", plot);

        svg.append("text")
        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
        .style("text-anchor", "middle")
        .text("Date");

        svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Value");

Answer 1

您获得的是预期的行为。它不会为每个数据点创建刻度，但是很好的＆＃34;覆盖数据范围的刻度数。

如果您需要特定的刻度线，可以使用tickValues代替ticks并传入所需的确切值数组。

刻度应与D3.js

1 个答案: