d3.js 需要在 y 轴上重复值

Posted

技术标签:

【中文标题】d3.js 需要在 y 轴上重复值【英文标题】:d3.js need repeated values on y axis 【发布时间】:2015-07-14 22:59:12 【问题描述】:

我有一个数组:

taskTypes = [slot1, slot2, slot3,slot4,slot1,slot2,slot6];

我的 y 轴代码是:

var y = d3.scale.ordinal()
    .domain(taskTypes)
    .rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1);

它仅在 y 轴上显示唯一值,我想按原样显示这些值。你能帮我写出正确的代码吗?

【问题讨论】:

我想按原样显示值.. 就像重复值一样 【参考方案1】:

This answer 给出了基本的解决方案:使用序数尺度,域值唯一标识对应的范围值。在您的情况下,两个 '"slot1"' 输入值都将映射到相同的输出值,因此不会显得唯一。

解决方案是使用数组索引(0, 1, 2...) 而不是数组值("slot1", "slot2"...) 作为您的序数比例输入域:

var taskTypes = ["slot1", "slot2", "slot3","slot4","slot1","slot2","slot6"];

var y = d3.scale.ordinal()
     .domain(d3.range(0, taskTypes.length))
     .rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1);

在这里提琴:http://jsfiddle.net/henbox/fhf3095r/3/

【讨论】:

嗨,还有一个查询,在此之前我在做 "translate(" + x(d.actual_startDate) + "," + y(d.slotName) + ")";其中 d.slotName = slot1,或 slot2 或 slot3 或任何其他值,但现在在您的更改后 y(d.slotName) 返回未定义,有什么建议吗?? @sachin 进行此更改后,您必须使用插槽索引,而不是名称。此答案还将您的标签更改为数字,除非您手动设置它们,例如在您的轴对象上使用.tickFormat(...)

以上是关于d3.js 需要在 y 轴上重复值的主要内容,如果未能解决你的问题,请参考以下文章

D3.js:使用图像(在数据中指定文件名)作为轴上的刻度值

使用 d3.js 制作分组条形图

处理 d3.js 轴上的日期

Python Matplotlib - 如何在 y 轴上指定值?

d3.js - 开始和结束刻度

Dimple.js如何在Y轴上自定义0到100的值范围?