我有一个如下的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。
答案 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;