javascript - 错误的原点引用

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

JSFiddle：https://jsfiddle.net/sbc6ejeu/2/

我添加了一个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));
}

最佳答案

在功能updateCirclePosition中，变量i包含预算的值，而yValues[i]是相应的收入。

可以使用x和y函数在图表中找到相应的坐标，因此应使用x(i)和y(yValues[i])设置正确的cx和cy：

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

更新的小提琴：https://jsfiddle.net/sbc6ejeu/5/

关于javascript - 错误的原点引用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34923679/