d3.js绘制线条转换错误

d3.js drawing a line transform error

本文关键字：转换错误 js 绘制 d3 更新时间：2023-09-26

我是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 + ")";

我画了一个完美的点集合（实际上不是一条线，所以不是我需要的，但至少有数千个点出现，数据被正确读取）。

明白了，傻我，你必须定义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]);