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

Question

我正在使用 d3 构建图表。

现在，我正在尝试像这样设置该区域的宽度和高度-

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

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

未捕获的类型错误: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 定义域(如果您没有)。