d3.js - 时间标度上均匀间隔的条 [英] d3.js - evenly spaced bars on a time scale

问题描述

我在d3.js中建立一个条形图，其中每个条形代表一个月内的总TB病例。数据基本上由一个日期（最初为％Y-％m格式的字符串，但使用d3.time.format.parse解析）和一个整数组成。我想轴标签是相对灵活的（显示年份边界，每月标签等），但我也希望条均匀间隔。

当我使用日期范围时，我可以获得灵活轴标签：

  var xScaleDate = d3.time.scale（）
 .domain（d3.extent（thisstat，function（d）{return d.date;}））
 .range（[0，width  - margin.left  -  margin.right]）; 
  

...但由于每月的天数不同，例如，2月和3月比其他月份明显更靠近在一起）。我可以使用线性尺度获得均匀间隔的条形：

  var xScaleLinear = d3.scale.linear（）
 .domain（[0，thisstat.length]）
 .range（[0，width  -  margin.left  -  margin.right]）; 
  

...但我不知道如何具有基于日期的轴标签。我已经尝试同时使用两个尺度，只从 xScaleDate 生成一个轴，只是看看会发生什么，但是尺度自然不会对齐。 p>

有没有一个简单的方法来实现这一点，我错过了？

解决方案

您可以组合序数和时间范围：

  //使用它绘制x轴
 var xScaleDate = d3.time.scale（）
 .domain（d3.extent（thisstat，function（d）{return d。 date;}））
 .range（[0，width  -  margin.left  -  margin.right]）; 
 
 //添加序数scale 
 var ordinalXScale = d3.scale.ordinal（）
 .domain（d3.map（thisstat，function（d）{return d.date ;}））
 .rangeBands（[0，width]，0.4，0）; 
 
 //现在你可以使用它们来均匀地空间列：
 columnGroup.enter（）
 .append（rect）
 .attr class，column）
 .attr（width，ordinalXScale.rangeBand（））
 .attr（height，function（d）{
 return height  -  yScale .value）; 
}）
 .attr（x，function（d）{
 return xScaleDate（d.date）; 
}）
 .attr （y，function（d）{
 return yScale（d.value）; 
}）; 
  

我刚刚创建了一个例子来演示这种方法：http://codepen.io/coquin/pen/BNpQoO

I'm building a bar plot in d3.js in which each bar represents total TB cases during a month. The data essentially consists of a date (initially strings in %Y-%m format, but parsed using d3.time.format.parse) and an integer. I'd like the axis labels to be relatively flexible (show just year boundaries, label each month, etc.), but I'd also like the bars to be evenly spaced.

I can get flexible axis labeling when I use a date scale:

var xScaleDate = d3.time.scale()
    .domain(d3.extent(thisstat, function(d) { return d.date; }))
    .range([0, width - margin.left - margin.right]);

... but the bars aren't evenly spaced due to varying numbers of days in each month (e.g., February and March are noticeably closer together than other months). I can get evenly-spaced bars using a linear scale:

var xScaleLinear = d3.scale.linear()
      .domain([0, thisstat.length])
      .range([0, width - margin.left - margin.right]);

... but I can't figure out how to then have date-based axis labels. I've tried using both scales simultaneously and only generating an axis from the xScaleDate, just to see what would happen, but the scales naturally don't align quite right.

Is there a straightforward way to achieve this that I'm missing?

解决方案

You can combine ordinal and time scales:

// Use this to draw x axis
var xScaleDate = d3.time.scale()
    .domain(d3.extent(thisstat, function(d) { return d.date; }))
    .range([0, width - margin.left - margin.right]);

// Add an ordinal scale
var ordinalXScale = d3.scale.ordinal()
    .domain(d3.map(thisstat, function(d) { return d.date; }))
    .rangeBands([0, width], 0.4, 0);

// Now you can use both of them to space columns evenly:
columnGroup.enter()
    .append("rect")
    .attr("class", "column")
    .attr("width", ordinalXScale.rangeBand())
    .attr("height", function (d) {
        return height - yScale(d.value);
    })
    .attr("x", function (d) {
        return xScaleDate(d.date);
    })
    .attr("y", function (d){
        return yScale(d.value);
    });

I've created an example a while ago to demonstrate this approach: http://codepen.io/coquin/pen/BNpQoO

这篇关于d3.js - 时间标度上均匀间隔的条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！