svg - jsから作成する場合、SVGビューボックスは無視されます

Question

ビューボックスを使用する d3.js を使用して SVG を作成しています。

ここに見られるように、JS から、viewbox は無視されます。ただし、JS によって生成されたコードを取得して HTML として配置すると、ここに示すように、ビューボックスを使用してレンダリングされます。

js で定義するとビューボックスが無視されるのに、html で定義すると無視されるのはなぜですか?

次のようなコード

var svg = d3.select('body')
.append('svg')
  .attr("height", 400)
  .attr("width", 400)
  .attr("viewbox",'0,0,100,100')
  .attr('style','border: 1px solid black')
.append('rect')
  .attr('x',0)
  .attr('y',0)
  .attr('width',100)
  .attr('height',100)
  .attr('fill','red');