Почему мой код js.d3 не отображает ось?

Question

Я попытался сделать набор осей x и y с этим кодом, и я в тупике, почему они не появляются. Я хочу, чтобы он отображал набор осей с диапазонами от -10 до 10, а красная линия сидела над этими осями. Я не уверен, почему именно ось не работает на этом этапе, последняя часть моего кода имеет в ней код оси.

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

Answer 1

Были некоторые ошибки, как отображение переходит из области в диапазоне не варьируются в домен и использования SVG вместо SVG и svg.scale вместо d3.scale и т.д.

посмотреть на себя https://jsfiddle.net/dango_x_daikazoku/33g9pLqe/4/

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)')