D3 x轴为一周中的每一天

时间:2016-08-08 02:02:51

标签: javascript d3.js

我有一个如下的JSON数组:

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

此数据涵盖一周,因此每周一至周日都有一个对象。

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

enter image description here

我已完成以下操作来设置我的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。

1 个答案:

答案 0 :(得分:3)

一旦您的days只是字符串,就可以使用scaleBand代替scaleTime

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 width = 550, height = 200;

var data = [{day:"Monday"},
    {day:"Tuesday"},
    {day:"Wednesday"},
    {day:"Thursday"},
    {day:"Friday"},
    {day:"Saturday"},
    {day:"Sunday"}
];

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	
var xScale = d3.scaleBand()
    .domain(data.map(function(d){ return d.day}))
    .range([0, width*0.95])
	
var xAxis = d3.axisBottom(xScale)
    .ticks(7);

svg.append("g")
	.attr("transform", "translate(0,100)")
	.call(xAxis);

text { font-size: 12px;}

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