如何使用d3js創建X和Y相交圖表？

Question

我有一個數據，分別顯示用戶和勝任能力的表現，分別是y和x軸。它的縮放比例從1到10.我想用d3js創建一個交點，但作爲初學者，我不知道從哪裏開始。

Answer 1

要在該點創建一個點，只需在交點上畫一個新的圓。 Here是一個非常簡單的圖形JSFiddle與評論，使其更容易理解。這些點來自data。對你來說重要的一塊是

.append("svg:circle") 
.attr("cy", function(d) { 
    return y(d.y); 
    }) 
    .attr("cx", function(d, i) { 
    return x(d.x); 
    }) 
.attr("r", 10) 

它創建一個SVG圈，將它放在數據點的X和Y座標，併爲它的10，更簡化的版本半徑，這可能是更容易使用你應用程序（因爲我不知道你的數據是如何存儲）是在數據養活手動

.append("svg:circle") 
.attr("cy", x(5)) 
.attr("cx", y(6)) 
.attr("r", 10) 

這將在5,6創建一個單一的數據點與10注半徑，這是使用縮放函數x（）和y（）將數據點5,6轉換爲像素值

var x = d3.scale.linear() 
    .domain([0, 10]) 
    .range([0, width]); 
var y = d3.scale.linear() 
    .domain([0, 10]) 
    .range([height, 0]);