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：

如果指定了一個值的數組，指定的值用於蜱而不是用規模的自動的節拍發生器。

因此，打造與您的數據陣列中的日期的數組，你可以簡單的寫：

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

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

在這裏，在相同的代碼堆棧段：

var margin = { 
 
      top: 20, 
 
      right: 80, 
 
      bottom: 90, 
 
      left: 50 
 
      }; 
 
      var data = [ 
 
      \t {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>