d3.js畫線變換錯誤

Question

我是新來的d3.js，我得到一個ReferenceError: x is not defined。

我只是想繪製一個點的線。

var points = svg.selectAll('.dots') 
        .data(data) 
        .enter() 
        .append("g") 
        .attr("class", "dots"); 

points.selectAll('.dot') 
      .data(function (d, index) 
       { 
        var a = []; 
        d.values.forEach(function (values, i) 
        { 
         a.push({'x': values.x, 'y': values.y}); 
        }); 
        return a; 
       }) 
      .enter() 
      .append('circle') 
      .attr('class', 'dot') 
      .attr("r", 2.5) 
      .attr('fill', function (d, i) 
      { 
       return colors[i]; 
      }) 
      .attr("transform", function (d) 
      { 
       /* Line 268: Uncaught ReferenceError: x is not defined */ 
       return "translate(" + x(d.x) + "," + y(d.y) + ")"; 
      } 
     ); 

在很多互聯網示例中，我看到x（）和y（）在繪製東西時被用在translate/transform中。我究竟做錯了什麼？我甚至有使用這個x（）和y（）的其他代碼示例，它們不會拋出錯誤。我無法弄清楚差異或我錯過的東西。

d.x實際上是一個日期，而d.y是一個數字。

如果我改變268線至：

/* Removing x() and y() fixes the error: */ 
    /* d.index increments from 0 up; assume this exists */ 
    return "translate(" + d.index + "," + d.y + ")"; 

我得到畫點的工作完美集合（不是行實際上，這樣不正是我需要的，但至少千點的出現和數據正在被正確讀取）。

Answer 1

明白了，我傻，你必須定義x和y：

var x = d3.time.scale() 
         .domain([ 
          d3.min(activeData, function(d) { return d.x; }), 
          d3.max(activeData, function(d) { return d.x; }) 
           ]) 
         .range([0, width]); 

var y = d3.scale.linear() 
         .domain([ 
          (d3.min(activeData, function(d) { return d.y; })), 
           d3.max(activeData, function(d) { return d.y; }) 
           ]) 
         .range([height, 0]);