Javascript D3图形上的显示区域

我在D3图形上显示区域时遇到问题。我猜问题在于数据格式（？），但我不确定。我完全是d3图书馆的初学者。我使用的是D3V5版本。我试图找到一些简单的例子，但我找到的大多数代码都非常复杂，而且对于一些旧版本来说

some_data = [
  {
    'width': 10,
    'height': 0.2,
  },
  {
    'width': 11,
    'height': 0.3,
  },
  {
    'width': 12,
    'height': 0.4,
  },
  {
    'width': 13,
    'height': 0.5,
  }
];

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the area
var area = d3.area()
  .x(function (d) {
      console.log('x');
      return x(d.width);
  })
  .y0(height)
  .y1(function (d) {
      return y(d.height);
  });

// define the line
var valueline = d3.line()
  .x(function (d) {
      return x(d.width);
  })
  .y(function (d) {
      return y(d.height);
  });


var svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


// format the data
this.some_data.forEach(function (d) {
    d.width = d.width;
    d.height = +d.height;
});

// scale the range of the data
x.domain(d3.extent(this.some_data, function (d) {
    return d.width;
}));
y.domain([0, d3.max(this.some_data, function (d) {
    return d.height;
})]);


// add the area
svg.append('path')
  .data(this.some_data)
  .attr('class', 'area')
  .attr('d', area);

// add the valueline path.
svg.append('path')
  .data(this.some_data)
  .attr('class', 'line')
  .attr('d', valueline);

// add the X Axis
svg.append('g')
  .attr('transform', 'translate(0,' + height + ')')
  .call(d3.axisBottom(x));

// add the Y Axis
svg.append('g')
  .call(d3.axisLeft(y));

区域根本不显示，我收到以下错误消息：

src/app/histogram/histogram.component.ts（45,20）中的错误：错误 TS2339:类型“[number，number]”上不存在属性“width”。 src/app/histogram/histogram.component.ts（49,20）：错误TS2339: 类型“[number，number]”上不存在属性“height”。 src/app/histogram/histogram.component.ts（55,20）：错误TS2339: 类型“[number，number]”上不存在属性“width”。 src/app/histogram/histogram.component.ts（58,20）：错误TS2339: 类型“[number，number]”上不存在属性“height”。 src/app/histogram/histogram.component.ts（89,18）：错误TS2345: 类型为“Area”的参数不可分配给 类型为“ValueFn”的参数。种类 参数“数据”和“基准”不兼容。 类型“{'width'：number；'height'：number；}”不能分配给类型“[number，number][]”。 类型“{”宽度“：number；”高度“：number；}”中缺少属性“length”。src/app/histogram/histogram.component.ts（95,18）： 错误TS2345:类型为“Line”的参数不正确 可分配给“ValueFn”类型的参数。种类 参数“数据”和“基准”不兼容。 类型“{'width'：number；'height'：number；}”不能分配给类型“[number，number][]”

---

如果您复制了一个示例，请正确复制它

svg.append('path')
  .data([this.some_data])
  .attr('class', 'area')
  .attr('d', area);

svg.append('path')
  .data([this.some_data])
  .attr('class', 'line')
  .attr('d', valueline);

编辑

.line {fill:none; stroke:red;}

---

你希望看到什么？画一张简单的画。做一个沙箱的例子，类似的话：谢谢你，这很有帮助，不管我还有什么麻烦。将行的填充样式设置为

none