調用軸功能導致問題D3

我剛開始學習D3，並且一直在按照教程創建這段代碼。調用軸功能導致問題D3

我創建了幾個酒吧，並打算爲我的圖創建一個x軸。問題是，當我添加「.CALL（X軸），」我的畫布瀏覽器不會顯示我什麼，我得到以下錯誤在控制檯：

Uncaught TypeError: Cannot call method 'copy' of undefined d3.min.js:5 
(anonymous function) d3.min.js:5 
(anonymous function) d3.min.js:3 
R d3.min.js:1 
da.each d3.min.js:3 
n d3.min.js:5 
da.call d3.min.js:3 
(anonymous function)

任何人都可以請幫我帶什麼錯誤？我真的不明白什麼是缺失或我做錯了什麼！

<!doctype html> 
<html> 
<head> 
    <title>Intro to D3</title> 
    <script src="d3.min.js"></script> 
<head> 

<body> 
    <script> 

     var width = 1024; 
     var height = 768; 

     var dataArray = [20, 40, 60, 120]; 

     var xAxis = d3.svg.axis() 
     .scale(widthScale); 

     var widthScale = d3.scale.linear() 
     .domain([0, 120]) 
     .range([0, width]); 

     var color = d3.scale.linear() 
     .domain([0, 120]) 
     .range(["red", "blue"]); 

     var canvas = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(20, 0)") 
     .call(xAxis); 

     var bars = canvas.selectAll("rect") 
     .data(dataArray) 
     .enter() 
      .append("rect") 
      .attr("width", function(d){ return widthScale(d); }) 
      .attr("height", 20) 
      .attr("fill", function(d){ return color(d); }) 
      .attr("y", function(d, i){ return i*30; }); 
    </script> 
</body> 
</html>

來源

2014-03-25 Vanquiza

問題是，您在定義軸之前將比例分配給座標軸。在此爲了做它工作正常：

var widthScale = d3.scale.linear() 
    .domain([0, 120]) 
    .range([0, width]); 
var xAxis = d3.svg.axis() 
    .scale(widthScale);

你可能也想在酒吧追加到SVG本身，而不是包含軸線g元素。要做到這一點，只需拆分的canvas定義和軸的追加：

var canvas = d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 
canvas.append("g") 
    .attr("transform", "translate(20, 0)") 
    .call(xAxis);

完成演示here。

來源

2014-03-25 12:05:09

Omg非常感謝你！：D我花了2個小時，我不敢相信我看不到！謝謝！ – Vanquiza

調用軸功能導致問題D3

回答

相關問題