javascript - d3 v4 为什么在 X 轴上有重复的刻度(如何使用 tickValues)？

Question

这是我的减少:

var CreateChart = (function() {
    var chtChartConstrictor = document.getElementById("chtChartConstrictor");
    var myChart;

    var drawChart = function(options) {
        // Set dimensions and margins of the graph
        var margin = {
            top: 20,
            right: 0,
            bottom: 0,
            left: 0,
        };
        var chtChartConstrictorMetrics = chtChartConstrictor.getBoundingClientRect();
        var width = chtChartConstrictorMetrics.width;
        var height = chtChartConstrictorMetrics.height;

        var parseTime = d3.timeParse("%Y-%m-%d");
        var formatTime = d3.timeFormat("%Y-%m-%d");
        // format the data
        options.line1.forEach(function(d) {
            d.date = parseTime(d.date);
            d.close = +d.close;
        });
        // parse the date / time

        if (options.chartType === "line") {
            
            // set the ranges
            let x = d3.scaleTime().range([0, width]).domain(
                d3.extent(options.line1, function(d) {
                    return d.date;
                })
            );
            let y = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]).domain([
                0,
                d3.max(options.line1, function(d) {
                    return d.close;
                }),
            ]);

            // define the area
            var area = d3
                .area()
                .x(function(d) {
                    
                    return x(d.date);
                })
                .y0(height)
                .y1(function(d) {
                    
                    return y(d.close);
                });
            // define the line
            var valueline = d3
                .line()
                .x(function(d) {
                    
                    return x(d.date);
                })
                .y(function(d) {
                    return y(d.close);
                });

            var svg = d3
                .select("#chtChartConstrictor")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            svg.append("path").attr("class", "cht-LineChart_Line").attr("d", valueline(options.line1));
            // add the area
            svg.append("path").data(options.line1).attr("class", "cht-LineChart_Fill").attr("d", area(options.line1));

            // add the X Axis
            svg.append("g").attr("class", "cht-LineChart_XAxis").attr("transform", "translate(0," + (height - 40) + ")").call(customXAxis);
            function customXAxis(g) {
                g.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m-%d")));
                g.select(".domain").remove();
                g.selectAll("line").remove();
                g.selectAll("text").attr("class", "cht-LineChart_XAxisNumber");
            }
            // add the Y Axis
            svg.append("g").attr("class", "cht-LineChart_YAxis").attr("transform", "translate(-5,0)").call(customYAxis);
            function customYAxis(g) {
                g.call(d3.axisRight(y));
                g.select(".domain").remove();
                g.selectAll("line").remove();
                g.select(".cht-LineChart_YAxis text:first-of-type").remove();
                g.selectAll("text").attr("class", "cht-LineChart_YAxisNumber");
            }

            // Gridline
            var gridlines = d3.axisLeft().tickFormat("").tickSize(-width).scale(y);

            svg.append("g").attr("class", "cht-LineChart_GridLineContainer").call(gridlines);
            svg.selectAll(".cht-LineChart_GridLineContainer line").attr("class", "cht-LineChart_GridLine");
            // Tidy up the generation by removing the text and path as we don't use them
            svg.selectAll(".cht-LineChart_GridLineContainer text").remove();
            svg.selectAll(".cht-LineChart_GridLineContainer path").remove();
        }
    };

    var destroyChart = function() {};

    var publicAPI = {
        DrawChart: drawChart,
        DestroyChart: destroyChart,
    };
    return publicAPI;
})();

CreateChart.DrawChart({
    chartType: "line",
    line1: [
        { date: "2016-12-25", close: 43 },
        { date: "2016-12-26", close: 57 },
        { date: "2016-12-27", close: 55 },
        { date: "2016-12-28", close: 44 },
        { date: "2016-12-29", close: 45 },
        { date: "2016-12-30", close: 30 },
        { date: "2016-12-31", close: 36 },
    ],
    line2: [],
});

#chtChartConstrictor {
	height: 320px;
	width: 100%;
}

.cht-LineChart_Line {
	fill: transparent;
	stroke: #f90;
   stroke-width: 2px;
}

.cht-LineChart_Fill {
	fill: rgba(73,255,255,.5);
}

.cht-LineChart_GridLine {
    stroke-dasharray: 4px 4px;
    stroke: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div id="chtChartConstrictor"></div>

我不明白为什么我在 X 轴上得到多个重复的刻度(日期)？谁能送我走上正确的道路？我只想看到每个数据点的勾号，仅此而已。

Answer 1

在 D3 中，使用时间刻度构建的轴会自动生成其刻度。也就是说，轴生成器决定将创建多少刻度:它们不对应于数据点。

话虽如此，您看到的报价并没有重复:它们实际上对应于不同的时间时刻......但是，由于其中一些属于同一天，这些报价似乎是重复的。但他们不是。

有几种方法可以解决这个问题。最简单的方法之一是使用 tickValues(如您在问题标题中所建议的那样)仅传递数据数组中的日期:

.tickValues(options.line1.map(function(d){
    return d.date
}))

这里是你的代码有那个变化:

var CreateChart = (function() {
    var chtChartConstrictor = document.getElementById("chtChartConstrictor");
    var myChart;

    var drawChart = function(options) {
        // Set dimensions and margins of the graph
        var margin = {
            top: 20,
            right: 0,
            bottom: 0,
            left: 0,
        };
        var chtChartConstrictorMetrics = chtChartConstrictor.getBoundingClientRect();
        var width = chtChartConstrictorMetrics.width;
        var height = chtChartConstrictorMetrics.height;

        var parseTime = d3.timeParse("%Y-%m-%d");
        var formatTime = d3.timeFormat("%Y-%m-%d");
        // format the data
        options.line1.forEach(function(d) {
            d.date = parseTime(d.date);
            d.close = +d.close;
        });
        // parse the date / time

        if (options.chartType === "line") {
            
            // set the ranges
            let x = d3.scaleTime().range([0, width]).domain(
                d3.extent(options.line1, function(d) {
                    return d.date;
                })
            );
            let y = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]).domain([
                0,
                d3.max(options.line1, function(d) {
                    return d.close;
                }),
            ]);

            // define the area
            var area = d3
                .area()
                .x(function(d) {
                    
                    return x(d.date);
                })
                .y0(height)
                .y1(function(d) {
                    
                    return y(d.close);
                });
            // define the line
            var valueline = d3
                .line()
                .x(function(d) {
                    
                    return x(d.date);
                })
                .y(function(d) {
                    return y(d.close);
                });

            var svg = d3
                .select("#chtChartConstrictor")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            svg.append("path").attr("class", "cht-LineChart_Line").attr("d", valueline(options.line1));
            // add the area
            svg.append("path").data(options.line1).attr("class", "cht-LineChart_Fill").attr("d", area(options.line1));

            // add the X Axis
            svg.append("g").attr("class", "cht-LineChart_XAxis").attr("transform", "translate(0," + (height - 40) + ")").call(customXAxis);
            function customXAxis(g) {
                g.call(d3.axisBottom(x)
                .tickValues(options.line1.map(function(d){return d.date}))
                .tickFormat(d3.timeFormat("%Y-%m-%d")));
                g.select(".domain").remove();
                g.selectAll("line").remove();
                g.selectAll("text").attr("class", "cht-LineChart_XAxisNumber");
            }
            // add the Y Axis
            svg.append("g").attr("class", "cht-LineChart_YAxis").attr("transform", "translate(-5,0)").call(customYAxis);
            function customYAxis(g) {
                g.call(d3.axisRight(y));
                g.select(".domain").remove();
                g.selectAll("line").remove();
                g.select(".cht-LineChart_YAxis text:first-of-type").remove();
                g.selectAll("text").attr("class", "cht-LineChart_YAxisNumber");
            }

            // Gridline
            var gridlines = d3.axisLeft().tickFormat("").tickSize(-width).scale(y);

            svg.append("g").attr("class", "cht-LineChart_GridLineContainer").call(gridlines);
            svg.selectAll(".cht-LineChart_GridLineContainer line").attr("class", "cht-LineChart_GridLine");
            // Tidy up the generation by removing the text and path as we don't use them
            svg.selectAll(".cht-LineChart_GridLineContainer text").remove();
            svg.selectAll(".cht-LineChart_GridLineContainer path").remove();
        }
    };

    var destroyChart = function() {};

    var publicAPI = {
        DrawChart: drawChart,
        DestroyChart: destroyChart,
    };
    return publicAPI;
})();

CreateChart.DrawChart({
    chartType: "line",
    line1: [
        { date: "2016-12-25", close: 43 },
        { date: "2016-12-26", close: 57 },
        { date: "2016-12-27", close: 55 },
        { date: "2016-12-28", close: 44 },
        { date: "2016-12-29", close: 45 },
        { date: "2016-12-30", close: 30 },
        { date: "2016-12-31", close: 36 },
    ],
    line2: [],
});

#chtChartConstrictor {
	height: 320px;
	width: 100%;
}

.cht-LineChart_Line {
	fill: transparent;
	stroke: #f90;
   stroke-width: 2px;
}

.cht-LineChart_Fill {
	fill: rgba(73,255,255,.5);
}

.cht-LineChart_GridLine {
    stroke-dasharray: 4px 4px;
    stroke: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div id="chtChartConstrictor"></div>

请注意，此解决方案存在问题:如果您的日期间隔不均匀(例如，[01-Dec, 02-Dec, 03-Dec, 06-Dec, 07-Dec]), ticks 将不会均匀分布，这在视觉上是不愉快的。