爲什麼我的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)')