Javascript 每周每天的D3 x轴

我有一个JSON数组，如下所示：

[
  {
    "day": "Monday",
    "sales": 242
  },
  {
    "day": "Tuesday",
    "sales": 256
  },
  ...
]

这些数据覆盖一周，因此从周一到周日每天都有一个对象

我已经用D3构建了一个条形图，一周中的每一天都有一个条形图。我现在尝试为每天添加一个带有刻度标签的x轴

我已执行以下操作来设置y轴：

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.sales;
  })])
  .range([height, 0]);

var yAxis = d3.axisLeft(yScale)
  .ticks(5);

svg.append("g")
  .call(yAxis);

---

这非常有效，但出于某种原因，我被困在如何在相应的栏下设置一周中的每一天的x轴上。注意：我使用的是D3版本4。

一旦您的

天数

只是字符串，您可以使用

缩放带

而不是

缩放时间

：

var xScale = d3.scaleBand()
    .domain(data.map(function(d){ return d.day}))
    .range([0, width])//you can use rangeRound instead
    .paddingInner(someValue);//the value of the inner padding, if any.

然后，相应地设置x轴：

var xAxis = d3.axisBottom(xScale);

检查此代码段：

var宽度=550，高度=200；
var data=[{day:“Monday”}，
{天：“星期二”}，
{日：“星期三”}，
{日：“星期四”}，
{日：“星期五”}，
{日：“星期六”}，
{日：“星期日”}
];
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var xScale=d3.scaleBand（）
.domain（data.map（函数（d）{return d.day}））
.范围（[0，宽度*0.95]）
var xAxis=d3.axisBottom（xScale）
.蜱（7）；
svg.append（“g”）
.attr（“转换”、“翻译（0100）”）
.呼叫（xAxis）
text{font size:12px；}