2

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

有没有一种简单的方法可以直接从向量中将点绘制为散点图？由于我是 d3 的新手，我一直使用 Scott Murray 的教程作为参考来创建我的散点图，但他使用了一组值对而不是 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);

谢谢！

4

1 回答 1

3

目前尚不清楚dataset您的代码片段中有什么，但假设 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 个元素数组。例如，如果输入数组 x 和 y 在调用 d3.zip 时如下所示：

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

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

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

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

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

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，指示正在绘制哪个圆。

于 2013-07-26T02:45:24.783 回答