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

目前尚不清楚代码片段中的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而不将它们压缩到另一个数组中，你可以这样做，虽然它有点像黑客：

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来控制要绘制的圆的数量，然后使用第二个i参数直接索引到x和y中，以指示正在绘制哪个圆的attr回调。

清洁从x和y向量创建散点图的方法

1 个答案: