D3线条图,可以'不能编辑刻度与序数刻度的数量
D3 linechart, can't edit the amount of ticks with an ordinal scale?
我之前问过一个关于d3的问题,他们建议我使用一个序数刻度,这样可以解决我的问题。它确实解决了我的问题,但我知道我被另一个问题困住了…
它画得很好,但是我的x轴满是文字。举个例子,我想:1900 1904 1908 1912…但我得到了:190119021903190419051906. 正如你所看到的,这不是很清楚。(这只是一个例子,如果只有日期,我可以使用另一种刻度)。我看到的每一个地方都在谈论axis.ticks(数字)。但这行不通。什么都没发生,我还是得到了同样的结果。我黑了一个结果,在x轴上得到更少的结果:
var str = [];
var i = 0;
while(i < data.length) {
str.push(data[i].age);
i=i+8;
}
x.domain(str);
但是如果我这样做,它会创建一条随机的线,并且不再完美地绘制它。不知道如何解决这个问题…这是一个简单的折线图,没什么难的,唯一的困难(对我来说)是序数刻度…
希望有人能帮帮我。
x轴和x轴是这样定义的:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-150],1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
没有while-loop(讨厌的hack),我只用下面这行定义x.domain:
x.domain(data.map(function(d) { return d.age; }));
查看轴的文档,特别是ticks()
函数。您可以使用它(或tickValues()
)来控制要显示的值的数量(和内容)。
如果您正在处理日期,您可能希望使用时间刻度而不是序数刻度。特别是,它将允许您以更有意义的方式控制刻度,例如指定您每五年需要一次刻度。
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 高亮显示时编辑文本大小和颜色
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 将事件聚焦/模糊在可编辑内容的元素上
- 编辑HTML表的源数据
- ExtJS网格单元格编辑器,防止焦点松动问题
- 如何在visualstudio中调试web api时编辑javascript文件
- 具有所有样式的文本正在复制到可编辑文本区域
- 可以't使用PHP使用Froala编辑器上传图像URL
- 用Greasemonkey编辑专栏
- 如何在corona sdk中从CK编辑器中检索数据
- 基于数据类型的编辑框的汇总列表
- 如何使用jQuery可编辑插件检查ajax是否成功完成
- 错误:[$compile:nonassign]表达式'未定义'与指令'内容可编辑'是不可
- 如何在ng-reeat中使用ng-switch来编辑JSON API数据
- 如何获取经过编辑的文本
- 文本编辑后,append函数不适用于文本区域
- Eclipse编辑器中无法访问的代码
- D3线条图,可以'不能编辑刻度与序数刻度的数量