Question

我正在制作条形图，其中x轴是一系列日期。我们有四种观点：

年 - 显示12个月的数据
月份 - 显示（28 / 9,30或31）天在选定的月份
DAY - 24小时显示
小时 - 显示60分钟

我首先开始使用scaleTime绘制x轴，但发现条形之间的空格不一致，然后将绘图转换为使用scaleBand。花了一天之后，我已经把所有东西都完全统一了，但是现在我遇到的问题是，如果为该时间间隔提供了值，它只显示日期条，并且它不会显示空间值不包含数据。

为清楚起见，我想要发生的是显示一个12个月的地方条形图，或者不论间隔是什么，即使只有7月和8月包含数据。现在如果我只输入7月和8月的数据，它会返回一个包含两个小节的图表。

即使没有数据代表那个时期，是否可以将空格添加到x轴？这是暗示的意思吗？如果是这样，看起来scaleBand不会这样做。任何人都可以推荐一种可以实现此目的的替代比例功能吗？

提前感谢您的帮助。

一点代码：

self.x = d3.scaleBand()
    .domain(self.pointsArray.map(function(d) {
        return new Date(d.start)
     }))
     .rangeRound([0, self.width], .05)
     .padding(.1)
self.g.append('g')
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + self.height + ')')
    .call(d3.axisBottom(self.x)
        .ticks(sections)
        .tickSizeOuter(0)
        .tickPadding(6)

Answer 1

由于这个原因，你没有获得所需的空间：

function start {
    exec bash -c "exec ${DAEMON} -n -p ${PIDFILE} ${NTPD_OPTS}" > /dev/null 2>&1
}

如您所见，您的域只包含数据中存在的分类变量。

简单的解决方案是手动传递数组（或编写一个函数来获取所需的区间数组）到域。例如，月份：

.domain(self.pointsArray.map(function(d) {
    return new Date(d.start)
 }))

这是一个演示，数据阵列只有四个月的信息（4月，5月，6月和11月），但所有月份都显示在轴上：

＆＃13;

.domain(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Out","Nov","Dec"])

＆＃13;

var data = [{
  month: "Apr",
  value: 10
}, {
  month: "May",
  value: 30
}, {
  month: "Jun",
  value: 40
}, {
  month: "Nov",
  value: 10
}];

var svg = d3.select("svg");
var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.value
  })])
  .range([120, 10]);
var xScale = d3.scaleBand()
  .domain(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Out", "Nov", "Dec"])
  .range([40, 280])
  .padding(0.2);

var rects = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("fill", "steelblue")
  .attr("x", function(d) {
    return xScale(d.month)
  })
  .attr("width", xScale.bandwidth())
  .attr("y", function(d) {
    return yScale(d.value)
  })
  .attr("height", function(d) {
    return 120 - yScale(d.value)
  });

var yAxis = d3.axisLeft(yScale);
var xAxis = d3.axisBottom(xScale);

svg.append("g").attr("transform", "translate(40,0)").call(yAxis);
svg.append("g").attr("transform", "translate(0,120)").call(xAxis);

＆＃13;

scaleBand中的D3空占位符？

1 个答案: