Question

这是我的代码：

255   0   0   ->   254   0   0
  0 255   0   ->   237 254   0
  0   0 255   ->    90   0 254
200   0 200   ->   254   0 210
255 153   0   ->   254 106   0
255 153 153   ->   254  99 125

我无法弄清楚如何让y轴标记与数据匹配并与条形图对齐？或者你可以在注释掉的代码中看到，我努力让文本出现。正确的文本（数字）将显示在开发工具中的元素中，但不会显示在页面上。任何帮助将不胜感激。

Answer 1

这不是D3的问题，而是关于统计数据和dataviz的问题：你说“我无法弄清楚如何让y轴滴答与数据相匹配”，但是有什么数据？没有！

您的数据集只是一个包含4个值的数组。如果要为每个值绘制一个水平条，x轴将显示一个定量变量（值：20,40,50,60）。但是你的y轴只显示不同的条形：它的分类，而不是定量。例如，你可以为这4个酒吧提供橙子，苹果，香蕉和酸橙。

所以，你的y轴必须是heightScale = d3.scale.ordinal()，而不是linear，你必须设置条形的分类值，就像我在这里用一组对象做的那样：

var dataArray = [
    {
        "fruit": "orange",
        "value": 20
    },
    {
        "fruit": "apple",
        "value": 40
    },
    {
        "fruit": "banana",
        "value": 50
    },
    {
        "fruit": "lime",
        "value": 60
    }
]

之后，您将域设置为：

heightScale.domain(dataArray.map(function(d){ return d.fruit }));

然后，您不需要使用i * 100设置y位置。相反，您可以更灵活地设置它：

.attr("y", function(d){ return heightScale(d) });

只需更改字母（a，b，c，d）的“水果”，就可以得到你想要的东西。

如何获得d3轴刻度以匹配我的数据？

1 个答案: