D3 - X 轴上不必要的值

Question

我正在使用 D3 创建一个折线图，我想在 X 轴中仅显示我的数据数组中存在的值。

var svg = d3.select("div#chart").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 + ")");


// Add the X Axis
var xAxis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).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

使用tickValues:

如果指定了 values 数组，则指定的值用于刻度，而不是使用刻度的自动刻度生成器。

因此，要使用数据数组中的日期创建一个数组，您可以简单地编写：

.tickValues(data.map(d=>d.date))

这是你更新的小提琴：https://jsfiddle.net/jy2qL7ka/

这里是 Stack sn-p 中的相同代码：

var margin = {
            top: 20,
            right: 80,
            bottom: 90,
            left: 50
          };
          var data = [
          	{date: '2017-01-15 21:39:12', value: 0},
            {date: '2017-01-15 21:43:12', value: 1},
            {date: '2017-01-15 21:44:12', value: 0},
            {date: '2017-01-15 21:48:12', value: 1},
            {date: '2017-01-15 21:50:12', value: 0},
            {date: '2017-01-15 21:53:12', value: 1},
            {date: '2017-01-15 21:55:12', value: 0}
          ];
          
          var width = 400 - margin.left - margin.right,
            height = 450 - margin.top - margin.bottom;

          var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
          var x = d3.scaleTime().range([0, width]);
          var y = d3.scaleLinear().range([height, 0]);

          // define the line
          var line = d3.line().curve(d3.curveStep)
            .x(function (d) {
              return x(d.date);
            })
            .y(function (d) {
              return y(d.value);
            });

          var svg = d3.select("body").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 + ")");

          // format the data
          data.forEach(function (d) {
            d.date = parseDate(d.date);
          });

          x.domain(d3.extent(data, function (d) {
            return d.date;
          }));

          y.domain([0, d3.max(data, function (d) {
            return d.value;
          })]);


          // Add the line path.
          svg.append("path")
            .data([data])
            .attr("class", "line")
            .style("fill", "none")
            .attr("d", line)
            .style('stroke', 'blue');

          svg.selectAll("dot")
            .data(data)
            .enter().append("circle")
            .attr("r", 4)
            .attr("cx", function (d) { return x(d.date); })
            .attr("cy", function (d) { return y(d.value); })
            .style("fill", 'blue');

          // 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");
          
          // Add the Y Axis
          svg.append("g")
            .call(d3.axisLeft(y));

<script src="https://d3js.org/d3.v4.min.js"></script>