设置SVG元素的宽度和高度 - d3.js

Question

我正在使用d3来构建图表。

现在，我正在尝试设置区域的宽度和高度 ike this -

   var area2 = d3.svg.area()
            .interpolate("monotone")
            .attr("width", this.options.width)
            .attr("height", 100);

但是，我得到了这个错误 -

未捕获的TypeError：undefined不是函数

看这里 -

注意：我已经过测试，且this.options.width不为空 - 它的值为1727.

我是d3和SVG的新手，任何建议都会有所帮助。

Answer 1

svg.area提供x，y0和y1（如之前在In Code中所述）。如果是线图，y0到y1是图形（x轴）的顶部 - 底部的底部。

这样的事情听起来像你想要的那样：

  var area2 = d3.svg.area()
        .x(function(d) { return x(d.X_VARIABLE); })
        .y0(height)
        .y1(function(d) { return y(d.Y_VARIABLE); });

很好的例子：http://www.d3noob.org/2013/01/filling-area-under-graph.html

正如作者所指出的那样，您应该为x和y定义域名（如果没有）。