调用轴功能导致问题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

回答

相关问题