如何使用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]);