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（）。我究竟做错了什么？我甚至有使用这个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]);

d3.js绘制一条线转换错误

1 个答案: