Javascript 错误的原点参考

当向SVG添加多个元素时，我面临着原点错误的问题

JSFiddle：

我已经添加了一个SVG和相关路径以及几个圆圈。它们似乎与正确的起源相对应。但是，当我移动滑块时，我希望id=movingCicle的圆（如代码中所述）沿着绿色曲线（线）移动。我无法开始首字母 圆的位置与其他svg元素的原点相同

我还注意到，红色圆圈的范围与其他元素或附加它的SVG不同。对于第二个和第三个下拉选项，当滑块增加时，红色圆圈将移出图形。我觉得我错过了什么

感谢您的帮助，谢谢

function initialize() {
  // Add circle data
  jsonCircles = [{
    "xAxis": 50,
    "yAxis": 154
  }, {
    "xAxis": 150,
    "yAxis": 154
  }];

  // Set the dimensions of the canvas / graph
  var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  };
  width = 600 - margin.left - margin.right;
  height = 270 - margin.top - margin.bottom;

  // Set the ranges
  x = d3.scale.linear().range([0, width]);
  y = d3.scale.linear().range([height, 0]);

  // Define the axes
  xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(10);

  yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(7);

  valueLine = d3.svg.line()
    .x(function(d, i) {
      return x(i);
    })
    .y(function(d) {
      return y(d);
    });

  // Adds the svg canvas
  svg = d3.select("#graph")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id", "svg1")
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");
}

function updateCirclePosition(i) {
  d3.select("#movingCircle").remove();

  svg.append("circle")
    .attr("cx", +i)
    .attr("cy", yValues[i])
    .attr("r", 5)
    .attr("id", "movingCircle")
    .style("fill", "red");
}

function addSvgElements() {
  // Add the valueline path.
  var path = svg.append("path")
    .attr("class", "line")
    .attr("id", "lineId")
    .attr("d", valueLine(yValues));
}

---

在函数

updatecreposition

中，变量

i

包含预算值，

yValues[i]

是相应的收入

可以使用

x

和

y

函数找到图表中的相应坐标，因此应使用

x（i）

和

y（y值[i]）

来设置正确的

cx

和

cy

：

svg.append("circle")
  .attr("cx", x(i))
  .attr("cy", y(yValues[i]))

---

更新的fiddle:

很难理解当我移动滑块时会发生什么-它应该将红点向右移动，还是沿着绿色路径移动？它该怎么办？@tiblu它应该沿着绿线移动。现在，我已将此预期行为添加到描述中，感谢您解释将值分配给cx&cy的函数的用法。