4

我想设置我的属性名称，而不是 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 调用。

4

3 回答 3

3

您可以传入一个返回标签的格式函数。这是 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

于 2013-09-06T05:02:52.800 回答
1

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

于 2014-02-25T22:41:34.363 回答
1

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

将 x 比例重命名为 y 比例时，范围变为 [height, 0] 而不是 [0, width]。这是因为 SVG 坐标系的原点在左上角。我们希望零值位于图表的底部，而不是顶部。同样，这意味着我们需要通过设置“y”和“height”属性来定位条形矩形，而之前我们只需要设置“width”。（“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]);

更多信息请点击 http://bost.ocks.org/mike/bar/3/

于 2014-12-03T05:25:37.773 回答