D3多线图,X轴分类数据

时间:2014-06-11 17:04:37

标签: d3.js data-visualization

我试图通过使用由工作日和值组成的公司分支数据来绘制多线图。

var data = [
    {
        "label": "branch-1",
        "values": [
            { "day": "Monday", "value": 20},
            { "day": "Tuesday", "value": 18},
            { "day": "Wednesday", "value": 29},
            { "day": "Thursday", "value": 31},
            { "day": "Friday", "value": 37},
            { "day": "Saturday", "value": 25},
            { "day": "Sunday", "value": 19}
        ]
    },
    {
        "label": "branch-2",
        "values": [
            { "day": "Monday", "value": 32},
            { "day": "Tuesday", "value": 29},
            { "day": "Wednesday", "value": 37},
            { "day": "Thursday", "value": 41},
            { "day": "Friday", "value": 31},
            { "day": "Saturday", "value": 28},
            { "day": "Sunday", "value": 17}
        ]
    }
]

FIDDLE LINK

首先,我在x-axis上遇到了问题。由于" d"不生成行。属性具有Nan值而不是svg路径上的正确x坐标。我知道我不应该使用minX,maxX for x.domain,但我找不到要使用的内容。

其次,我使用d3.scale.category20()函数生成颜色。但我想知道如果有超过20个分支,我是否可以使用超过20种颜色。是否可以使用CSS

提前致谢。

1 个答案:

答案 0 :(得分:1)

序数量表需要明确设置其域,也就是说,序数域没有“min”或“max”的概念。你必须做类似

的事情
x.domain(data[0].values.map(function (d) { return d.day; }));

完整演示here。至于颜色,你可以在CSS或D3代码中设置你想要的任何东西。