代码之家 › 专栏 › 技术社区 › elkHunter

DC。带日期轴的js条形图

dc.js d3.js

elkHunter · 技术社区 · 7 年前

我想根据x轴上的日期创建一个条形图。标签应显示为月份(即1月、1月17日-首选)。在我的数据中,我始终使用以下月份的第一个日期,即1月1日、2月1日和3月1日。我已经创建了一个图表,但无法将其对齐。

var chart   = dc.barChart("#" + el.id);
var chCategory = ndx.dimension(function(d) {return d[chCategoryName];});
chValues = chCategory.group().reduceSum(
   return parseFloat(d[chValueName]);});


//set range for x-axis
var minDate = chCategory.bottom(1)[0][chCategoryName];
var maxDate = chCategory.top(1)[0][chCategoryName];
chart
  .width(800)
  .height(200)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .dimension(chCategory)
  .group(chValues)

  .renderHorizontalGridLines(true)
// .centerBar(true) //does not look better
   .controlsUseVisibility(true)
   .ordinalColors(arrColors) 
   .transitionDuration(1000)
   .margins({top: 10, left: 80, right: 5, bottom: 20})

Chart Preview

我已经读过这篇文章: dc.js x-axis will not display ticks as months, shows decimals instead 但我无法以一种在不同年份保持正确排序的方式实现它。

1 回复 | 直到 7 年前

Gordon 7 年前

dc。js从字面上理解了这个域-x轴从开始到结束精确地延伸,不考虑条的宽度或它们的位置。这是一个设计缺陷。

这里有两个解决方法。

保持条形图居中并添加填充

如果您正在使用 elasticX 您可以像这样手动更正它:

chart.centerBar(true)
    .xAxisPadding(15).xAxisPaddingUnit('day')

如果您只是手动设置域,那么

minDate = d3.time.day.offset(minDate, -15);
maxDate = d3.time.day.offset(maxDate, 15);

将记号与条形图的左侧对齐,并更正域的右侧

你不会说当你不把横杆居中时会遇到什么问题。 But I know the right bar can get clipped.

如果你想要 弹性体 实际上,您可以像这样手动实现它,将右侧偏移一个月( example ):

function calc_domain(chart) {
    var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
        max = d3.max(chart.group().all(), function(kv) { return kv.key; });
    max = d3.time.month.offset(max, 1);
    chart.x().domain([min, max]);
}
chart.on('preRender', calc_domain);
chart.on('preRedraw', calc_domain);

还是没有 弹性体 那只是:

maxDate = d3.time.month.offset(maxDate, 1);

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

2 年前

user6456564 · 双条形图创建

6 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

MTT · 最适合散点图的回归

6 年前

Cyley Simon · 以chile/name格式将Csv转换为json

6 年前

Himani · 线图和面积图之间的颜色不同

6 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

6 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

6 年前