Question

D3.js已更新，我不知道如何将旧代码更改为新版本。谢谢。

这是代码。

   function renderAxes(svg) {
            var axesG = svg.append("g")
                    .attr("class", "axes");
            var xAxis = d3.svg.axis()
                    .scale(_x.range([0, quadrantWidth()]))
                    .orient("bottom");
            var yAxis = d3.svg.axis()
                    .scale(_y.range([quadrantHeight(), 0]))
                    .orient("left");
            axesG.append("g")
                    .attr("class", "axis")
                    .attr("transform", function () {
                        return "translate(" + xStart() + "," + yStart() + ")";
                    })
                    .call(xAxis);
            axesG.append("g")
                    .attr("class", "axis")
                    .attr("transform", function () {
                        return "translate(" + xStart() + "," + yEnd() + ")";
                    })
                    .call(yAxis);
        }

Answer 1

你试图放置轴是不明确的，因为我们不知道xStart()，yStart()，quadrantWidth()等等。

但是你得到的错误是因为D3更新了创建轴的功能。我们现在拥有：d3.svg.axix()，d3.axisLeft()等，而不是d3.axisBottom()。创建比例也是不同的。您的代码中不清楚_x和_y是什么或它们是如何创建的，因此下面的代码只会产生新的比例。

这应该会使错误消失，但可能仍需要更新以便将事情放在正确的位置。：

function renderAxes(svg) {
  var axesG = svg.append("g")
          .attr("class", "axes");

  var x = d3.scaleLinear()
          .range([0, quadrantWidth()])

  var xAxis = d3.axisBottom(x)

  var y = d3.scaleLinear()
          .range([quadrantHeight(), 0])

  var yAxis = d3.axisLeft(y)

  axesG.append("g")
          .attr("class", "axis")
          .attr("transform", function () {
              return "translate(" + xStart() + "," + yStart() + ")";
          })
          .call(xAxis);
  axesG.append("g")
          .attr("class", "axis")
          .attr("transform", function () {
              return "translate(" + xStart() + "," + yEnd() + ")";
          })
          .call(yAxis);

}

D3.js更新代码，错误：无法读取undefined属性'axis'？

1 个答案: