javascript - 从 x 和 y 向量创建散点图的简洁方法

Question

我正在使用 Ruby 作为后端构建 d3.js 散点图可视化。 我的 ruby​​ 代码输出的 x 和 y 值由两个向量组成:x 和 y。

是否有一种简单的方法可以直接从向量将点绘制为散点图？由于我是 d3 的新手，我一直在使用 Scott Murray 的 tutorials作为创建散点图的引用，但他使用值对数组而不是 x 和 y 向量。

我尝试这样做，但似乎不起作用

svg.selectAll("one_circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("class", "datapoint")
    .attr("cx", function(d){
        return xscale(x[d]);
        })
    .attr("cy", function(d){
        return yscale(y[d]);
        })
    .attr("r", 2);

谢谢!

Answer 1

不清楚您的代码片段中的数据集是什么，但假设 x 和 y 是您提到的向量，这应该有效:

svg.selectAll("circle.datapoint")
    .data(d3.zip(x,y))
    .enter()
    .append("circle")
    .attr("class", "datapoint")
    .attr("cx", function(d){
        return xscale(d[0]);
    })
    .attr("cy", function(d){
        return yscale(d[1]);
    })
    .attr("r", 2);

d3.zip 的作用是采用 N 个数组(其中最短的长度为 M 个元素)，并使用每个输入数组中的相应元素创建一个由 N 个元素数组组成的 M 元素数组。例如，如果调用 d3.zip 时输入数组 x 和 y 如下所示:

x = [1,2,3,4];
y = [5,6,7,8];

那么 d3.zip(x,y) 的输出将是:

[[1,5],[2,6],[3,7],[4,8]]

正是您需要放置四个圆圈的位置。我还更改了您的元素选择器以匹配您正在创建的元素...

---

如果你真的只想直接访问 x 和 y 而不将它们压缩到另一个数组中，你可以这样做，尽管这有点麻烦:

svg.selectAll("circle.datapoint")
    .data(x.length < y.length ? x : y)
    .enter()
    .append("circle")
    .attr("class", "datapoint")
    .attr("cx", function(d, i){
        return xscale(x[i]);
    })
    .attr("cy", function(d, i){
        return yscale(y[i]);
    })
    .attr("r", 2);

这里使用 x 和 y 中较短的一个来控制要绘制的圆的数量，然后使用 attr 回调的第二个 i 参数直接索引 x 和 y 来指示正在绘制哪个圆。