使用 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]);});

是对未定义的操作。

编辑

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

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

查看更新here。

我还对其进行了修改以使用正确的轴，因此更易于可视化。