如何将 nvd3 轴设置为使用字符串而不是数值

How to set a nvd3 axis to use strings instead of numerical values ?

本文关键字：字符串 nvd3 设置      更新时间：2023-09-26

我想设置我的属性名称，而不是 x 轴上的数值。我不是Javascript英雄。我正在使用散点图。

我相信它应该是这样的：

chart.xAxis.tickFormat(d3.format(String));

然后我可以设置：

chart.xAxis
  .axisLabel('Attributes').staggerLabels(true).tickValues(["A", "B", "C"]);;

，然后设置值：

data[i].values.push({
 x : "A" ,
       y : 29.765957771107,
    size: Math.random(), 
    shape: shapes[j % 6]
     } , ..

如何在x轴上查看我的属性"A"，"B"等？我也浏览了 nvd3 源代码，但没有找到正确的 API 调用。

您可以传入返回标签的格式函数。这是 d3js 的 API。

var x_format = function(num) {
    if (num === 2.3)
        return "A";
    else if (num === 5.6)
        return "B";
    else if (num === 45.2)
        return "C";
};
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(x_format);

看看我为散点图制作的这个例子。

http://vida.io/documents/jSGz9TQEmzwMqQzhs

{（A， 2.3）， （B， 5.6）， （C， 45.2） }

更新：我的答案具有固定值。

更新：线、条形、散点图之间的混合组合：

http://vida.io/documents/fN5FjsYaHaJSXEjz7

我有同样的问题。我的简单解决方案是避免声明 x 轴的代码。 在 nvd3 web 中也有这个解决方案：有关示例，请参见 http://nvd3.org/livecode/index.html#codemirrorNav。

将条形图旋转为柱形图主要涉及将 x 与 y 交换。 但是，还需要一些较小的附带更改。 这是直接使用 SVG 而不是使用高级可视化语法的成本 喜欢 ggplot2 另一方面，SVG 提供了更大的可定制性;SVG是一个网络标准， 因此，我们可以使用浏览器的开发人员工具，如元素检查器，并将 SVG 用于可视化以外的事情。

将 x 刻度重命名为 y 刻度时，范围将变为 [高度， 0] 而不是 [0， 宽度]。这是因为 SVG 坐标系的原点位于左上角。我们希望零值位于图表的底部，而不是顶部。同样，这意味着我们需要通过设置"y"和"height"属性来定位柱线矩形，而以前我们只需要设置"宽度"。（"x"属性的默认值为零，旧条形左对齐。

var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.range([0, 1, 2, 3, 4, 5]);

手动枚举每个柱线的位置会很乏味，因此我们可以使用 rangeBands 或 rangePointss 将连续范围转换为一组离散的值。rangeBands 方法计算范围值，以便将图表区划分为间距均匀、大小均匀的波段，如条形图中所示。类似的范围点方法计算均匀间隔的范围值，就像在散点图中一样。

例如：

 var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.rangeBands([0, width]);

欲了解更多信息，请单击 http://bost.ocks.org/mike/bar/3/

相关文章：