Question

我正在使用D3绘制图表。但x轴上的刻度标签似乎无法正确显示。例如在星期日，数字为0，但0点不在当天的时间点（太阳-15）

数据集：

[{"date":"2017-10-18","count":14},{"date":"2017-10-17","count":32},{"date":"2017-10-16","count":9},{"date":"2017-10-15","count":0},{"date":"2017-10-14","count":8},{"date":"2017-10-13","count":12},{"date":"2017-10-12","count":8},{"date":"2017-10-11","count":15}]

预期：在太阳15的刻度处，曲线中的点必须为0 实际：这是3。

xAxis = d3.axisBottom（xScale）.ticks（d3.timeDay）.tickFormat（d3.timeFormat（“％a％d”））;

function InitChart() {
        console.log(JSON.stringify(data))
        $("#visualisation", el).empty();
        console.log("DATE"+data);
        var minDate=new Date (data[data.length-1].date);
        var maxDate=new  Date(data[0].date);
        function getMax(arr, prop) {
            var max;
            for (var i=0 ; i<arr.length ; i++) {
                if (!max || parseInt(arr[i][prop]) > parseInt(max[prop]))
                    max = parseInt(arr[i][prop]);
            }
            return max;
        }
        var maxCount = getMax(data, "count");
        var vis = d3.select("#visualisation"),
            WIDTH = 900,
            HEIGHT = 430,
            MARGINS = {
                top: 10,
                right: 5,
                bottom: 10,
                left: 50
            },
            xScale = d3.scaleTime().range([MARGINS.left, WIDTH - MARGINS.right]).domain([minDate, maxDate]);
            yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, maxCount+30]);
            xAxis = d3.axisBottom(xScale).ticks(d3.timeDay).tickFormat(d3.timeFormat("%a %d"));

        yAxis = d3.axisLeft()
            .scale(yScale)

        vis.append("svg:g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
            .call(xAxis);
        vis.append("svg:g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (MARGINS.left) + ",0)")
            .call(yAxis);
        var lineGen = d3.line()
            .x(function(d) {
                return xScale(new Date(d.date));
            })
            .y(function(d) {
                return yScale(d.count);
            })
            // .curve(d3.curveCardinal)

        vis.append('svg:path')
            .attr('d', lineGen(data))
            .attr('stroke', '#ff6a6a')
            .attr('stroke-width', 2.5)
            .attr('fill', 'none');
        // vis.append('svg:path')
        //     .attr('d', lineGen(data2))
        //     .attr('stroke', 'red')
        //     .attr('stroke-width', 2.5)
        //     .attr('fill', 'none');

        var totalLabels = vis.append('g').attr('class', 'totals');
        totalLabels.selectAll('.total')
            .data(data)
            .enter().append('text')
            .text(function(d) {
                // Inject total as text content (stored as d.value)
                return d.count;
            })
            .style("fill", '#f1e447')

            .attr('class', 'total')
            .attr("x", function(d) {
                // Retrieve the correct vertical coordinates based on the date (stored as d.key)
                // Plus some pixel offset so that the text is centered vertically relative to bar
                return xScale(new Date(d.date));
            })
            .attr("y", function(d) {
                // Retrieve the horizontal coordinates based on total (stored as d.value)
                // Add 5px offset so the label does not 'stick' to end of stacked bar
                return yScale(d.count) -10;
            })

    }
    InitChart();

Answer 1

我找到了答案使用.setHours（0,0,0,0）

时，我们必须将时间设置为0

D3图表曲线在刻度标签

1 个答案: