乾淨的方式來創建從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

目前還不清楚是什麼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的短，以控制圈的數目來繪製，然後直接進行索引x和y與第二i參數到ATTR回調指示哪個圓正在繪製中。