Question

而不是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调用。

Answer 1

您可以传入返回label的格式函数。这是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）}

更新：我的答案是固定值。

更新：line，bar，scatterplot：

之间的混合组合

http://vida.io/documents/fN5FjsYaHaJSXEjz7

Answer 2

我有同样的问题。我的简单解决方案在于避免代码声明x轴。在nvd3网络中也有这个解决方案：请参阅http://nvd3.org/livecode/index.html#codemirrorNav以获取示例。

Answer 3

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

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

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

手动枚举每个柱的位置会很繁琐，因此我们可以使用rangeBands或rangePoints将连续范围转换为一组离散值。 rangeBands方法计算范围值，以便将图表区域划分为均匀间隔，大小均匀的条带，如条形图中所示。类似的rangePoints方法计算均匀间隔的范围值，如散点图中所示。

例如：

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

For more information Click http://bost.ocks.org/mike/bar/3/

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

3 个答案: