- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 dc.js,我制作了一个带有数值的序数条形图。我选择序数图是因为我想为“未知”添加 x 勾。
问题出在 y 轴上。我无法弄清楚如何修复轴标签/缩放。如图所示,在[00,20,40,60,80]之间交替。我希望它有一个完整的系列。我尝试手动插入 y 刻度,但似乎没有 y 轴的访问器方法。下面是我的代码和捕获。
ghg2Chart /* dc.barChart('#volume-month-chart', 'chartGroup') */
.width(FULL_CHART_WIDTH)
.height(FULL_CHART_HEIGHT)
.margins({top: 10, right: 20, bottom: 40, left: 20})
.dimension(GHG2)
.group(GHG2Group)
.elasticY(true)
.centerBar(true)
.gap(5)
.round(dc.round.floor)
.alwaysUseRounding(true)
.x(d3.scale.ordinal().domain(GHG2bins))
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
//Customize the filter displayed in the control span
.filterPrinter(function (filters) {
var filter = filters[0], s = '';
s += numberFormat(filter[0]) + ' -> ' + numberFormat(filter[1]);
return s;
})
.filterHandler(function (dimension, filter) {
var selectedRange = ghg2Chart.filter();
dimension.filter(function (d) {
var range;
var match = false;
// Iterate over each selected range and return if 'd' is within the range.
for (var i = 0; i < filter.length; i++) {
range = filter[i];
if (d >= range - .1 && d <= range) {
match = true;
break;
}
}
return selectedRange != null ? match : true;
});
return filter;
});
最佳答案
图表的唯一问题是没有足够的空间容纳刻度线,因此标签被剪裁。
默认左边距为 30 像素:
https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.marginMixin+margins
尝试增加边距。偷懒的方法是:
chart.margins().left = 40;
但这有点令人困惑,所以更常见的方法是
chart.margins({top: 10, right: 50, bottom: 30, left: 40});
如果 dc.js 能够自动执行此操作,那就太棒了:
https://github.com/dc-js/dc.js/issues/713
但是根据文本大小进行布局相当困难,因此目前所有这些内容仍然是手动的(影响图例、轴标签等)
关于javascript - dcjs 序数条形图上的 y 轴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36432760/
我将 dc.js 和 d3-tip 用于我的折线图并得到下一个: 现在工具提示仅在我在某行上执行 mouseover 时显示。我需要在图表的任何一点显示工具提示,并在图表 below 中显示每个轴附近
我使用 dc.js 创建了一个仪表板。在我的仪表板中,有一个复选框允许用户在计数和金额之间切换仪表板行为。为此,我为所有组重新创建了具有不同 reduceSum 的 crossfilter。 (尽管,
这是来自 Splitting and grouping records into daily sets using d3.js and dc.js 的后续问题。 我有一个如下所示的数据集结构: [
使用 dc.js,我制作了一个带有数值的序数条形图。我选择序数图是因为我想为“未知”添加 x 勾。 问题出在 y 轴上。我无法弄清楚如何修复轴标签/缩放。如图所示,在[00,20,40,60,80]之
如果我使用 yAxis() 刻度或刻度格式,我有这段代码会引发错误。 revSpendCompositeChart .width(400).height(180)
我在dcjs中有很多数据,JSON列表中有450条记录,每条记录都有一个包含特定日期的“mydate”字段。我希望能够有一个包含季度“Q1”“Q2”“Q3”“Q4”的条形图。这对于 dcjs/cros
在 dc.leaflet 版本 0.2.3 的 Choropleth 图表中,弹出窗口不起作用或无法渲染。是我错了还是其他人也遇到了这种情况?我很乐意解决这个问题,但我需要一些帮助。 .rende
我是一名优秀的程序员,十分优秀!