Question

当多个元素添加到SVG时，我遇到了错误的原点问题。

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

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

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

对此提出任何帮助。谢谢！

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));
}

Answer 1

在函数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/

错误的原点参考

1 个答案: