javascript - 我正在尝试使用多个 2 数组来绑定(bind) svg 圆的数据，但无法弄清楚如何

Question

假设我有 2 个数组:

    var x_axis_values = [0,1,2,3];

    var y_axis_values = [2,3,4,5];

    var svgContainer = d3.select("body").append("svg")

                                     .attr("width", 200)

                                     .attr("height", 200);

var circles = svgContainer.selectAll("circle")

                        .data(x_axis_values)
                        .enter()
                        .append("circle");


var circleAttributes = circles

                        .attr("cx",function(d) {return d;})

这里我无法绑定(bind)“cy”的数据，因为我使用的数组是x_axis_values。如何在这里绑定(bind) y_axis_values 数组中的数据？我知道使用 JSON 格式可能会更简单，但如果我使用数组来完成此操作会更好。

提前致谢。

Answer 1

只需获取您所在的索引并从 y_axis_values 数组中返回相应的值即可:

var x_axis_values = [0, 1, 2, 3];

var y_axis_values = [2, 3, 4, 5];

var svgContainer = d3.select("body").append("svg")
  .attr("width", 200)
  .attr("height", 200);

var circles = svgContainer.selectAll("circle")

.data(x_axis_values)
  .enter()
  .append("circle");


var circleAttributes = circles
  .attr("cx", function(d) {
    return d;
  })
  .attr("cx", function(d, i) { //add i here to get current index
    return y_axis_values[i]; //gets current index of x_axis_values and  gets the corresponding y_axis_values value
  })