如何使用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圆圈，将其放在数据点的sx和y坐标上，并给它一个半径为10.更简化的版本可能更容易用于您的应用程序（因为我不喜欢＆＃39 ;知道你的数据是如何存储的）是手动输入数据

.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]);