javascript - 基于数据点强制面积图的 X 轴刻度线

Question

我正在使用 D3 的面积图为具有这种结构的数据构建图表:

data = [
  {
    date: "2019-02-01", 
    value: 100
  }, {
    date: "2019-03-01", 
    value: 1
  }
]

当我使用 D3's Area Chart Example 时他们将 X 轴设置为:

const x = d3.scaleTime()
    .domain(d3.extent(data, d => Date.parse(d.date)))
    .range([margin.left, width - margin.right])
const xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));

但是，这会在整个 X 轴上均匀地添加刻度线。我尝试了类似的东西:

const xAxis = g => g
    .attr("transform", 'translate(0,' + (height + data.length) + ')')
    .call(d3.axisBottom(x).ticks(data.length).tickSizeOuter(0));

但是 X 轴上什么也没有出现。我怎样才能让 X 轴只显示数据中给定 date 值的刻度线(即对于上面的示例数据，我只想在 X 轴上看到 2019-02-01 和 2019-03-01)。

更好的做法是仅显示这些日期的月份和年份(即 2019-02-01 在图表上将显示为 Feb. 2019)。

Answer 1

您可以通过向包含所需刻度值的 axis.tickValues() 提供一个数组来指定哪些值应该是刻度。如果您的刻度应该是数据数组中的值，那么您只需要遍历数组并挑选出值。在您的情况下，这可能看起来像:

var axis = d3.axisBottom()
  .scale(x)
  .tickValues(
     data.map(function(d) { return timeParse(d.date); })
  )

如果你的刻度是时间刻度，那么值必须是日期对象，所以我们不能传递格式化的日期。但是，如果我们想指定刻度的显示方式，那么我们也可以将格式传递给 axis.tickFormat，这样您就可以设置日期的显示方式。我们一起得到:

var svg = d3.select("svg");

var data = data = [
  {
    date: "2019-02-01", 
    value: 100
  },
  {
    date: "2019-03-1", 
    value: 50
  },
  {
    date: "2019-05-01", 
    value: 1
  }

];

var timeParse = d3.timeParse("%Y-%m-%d");
var timeFormat = d3.timeFormat("%B %Y");

var x = d3.scaleTime()
  .domain(d3.extent(data,function(d) { return timeParse(d.date); }))
  .range([20,300]);
  
var y = d3.scaleLinear()
  .domain([0,100])
  .range([10,100]);
  
var line = d3.line()
  .x(function(d) { return x(timeParse(d.date)); })
  .y(function(d) { return y(d.value); })
  
svg.append("path")
  .datum(data)
  .attr("d", line);
  
// Axis:
var axisBottom = d3.axisBottom()
  .scale(x)
  .tickValues(data.map(function(d) {
    return timeParse(d.date); // specify which values should be ticks.
  }))
  .tickFormat(timeFormat);
  
svg.append("g")
  .attr("transform","translate(0,100)")
  .call(axisBottom);
  
  
  
svg.selectAll("text")
  .attr("text-anchor","start")
  .attr("transform","rotate(90)translate(10,-13)");

path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="400"></svg>