用 D3 缩放轴 JavaScript

Question

我已经绘制了 X 轴和 Y 轴。我有几个点要显示在轴上。 X 轴从 4.5 到 8，Y 轴从 2 到 4，我的观点各不相同。

你可以找到我所做的DEMO。

function kmeans(){
    x_means[0] = 5.9;

    plotMeans();
}

问题是这张图表显示了诸如 0.59 之类的点。但是，我看不到我何时给出 5.9 的值，因为它不在图表中。

关于如何解决这个问题有什么想法吗？

谢谢！

Answer 1

如果您检查 javascript 控制台，您会看到此错误：

Error: Invalid value for <circle> attribute cy="NaN"

这是因为您提供给 d3 的数据是：

> numeric.transpose([[0.59],[]])
    Array[2]
      0: 0.59
      1: undefined

这样：

.attr("cy", function(d, i){return Y(d[1]);});

是对undefined的操作。

编辑

好的，请重新阅读您的问题。您的秤需要一个域，这是您的坐标 space 的用户 space 跨度。然后 range 就是坐标 space 的像素跨度。比例尺将两者映射在一起：

var X = d3.scale.linear()
    .range([0, width]) //<-- 0 to 960 pixels
    .domain([0,10]); //<-- maps to coordinates 0 to 10

查看更新 here。

我还对其进行了修改以使用适当的轴，因此更容易可视化。

Scaling Axis with D3 JavaScript