Javascript 为什么我的js.d3代码不显示axis？

我试着用这段代码制作一组x轴和y轴，但我不明白为什么它们没有出现。我希望它显示一组范围为-10到10的轴，红线位于这些轴的上方。我不清楚为什么axis在这个阶段不工作，我代码的后一部分包含axis代码

//variable declaration
var width = 500;
var height = 300;
var margin = 10;
//svg setup
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append('g') 
            .attr("transform", "translate(" + margin + "," + margin + ")" )
//line setup
svg.append('line')
   .attr({
  x1: 0,
  y1: 0,
  x2: 250,
  y2: 250
});
//scales and axis setup
var scaleX = d3.scale.linear()
        .range([-10, 10])
        .domain([0, width])


var scaleY = d3.scale.linear()
        .range([-10, 10])
        .domain([height, 0])

var axisX = d3.svg.axis()
               .scale(scaleX)  
               .orient("bottom");

var axisY = d3.svg.axis()
               .scale(scaleY)
               .orient("left");

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + "," + height/2 + ")")
   .call(axisX);

svg.append("g")
   .attr("class", "y axis")
   .attr("transform", "translate(" + width/2 + "," + "0)") 
   .call(axisY);

---

有一些错误，比如映射从一个域到另一个域，而不是从一个域到另一个域，以及使用Svg代替Svg和Svg.scale代替d3.scale等

你自己看看吧

var width = 500;
var height = 300;
var margin = 30;

//svg setup
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append('g')
  .attr("transform", "translate(" + margin + "," + margin + ")");

//line setup


//scales and axis setup
var scaleX = d3.scale.linear()
  .domain([-10, 10])
  .range([0, width])

var scaleY = d3.scale.linear()
  .domain([-10, 10])
  .range([height, 0])

var axisY = d3.svg.axis()
  .scale(scaleY)
  .orient("left");

var axisX = d3.svg.axis()
  .scale(scaleX)
  .orient("bottom");

svg.append("g")
    .attr('class', 'y-axis axis')
  .call(axisY);

svg.append("g")
    .attr('class', 'x-axis axis')
  .call(axisX)
  .attr('transform', 'translate( 0, 250)')