D3 Bubble Chart - Как сделать ширину 100 % для элемента SVG или всей пузырьковой крышки по всей ширине, но высота остается неизменной

Question

Пузырь принимает определенную ширину, я хочу, чтобы он занимал всю ширину контейнера и распределялся по всему контейнеру, но высота не изменилась

Вот мой код компонента Angular2

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { bubbleData } from '../../shared/Mapstyles';
declare var d3: any;
@Component({
selector: 'app-bubble-graph',
templateUrl: './bubble-graph.component.html',
styleUrls: ['./bubble-graph.component.css'],
encapsulation: ViewEncapsulation.None
})
export class BubbleGraphComponent implements OnInit {
margin = 20;
diameter = 400;
color = d3.scale.linear()
.domain([-1, 5])
.range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
.interpolate(d3.interpolateHcl);
 pack: any;
 svg: any;
 ngOnInit() {
 this.initSvg();
 this.drawSVG(bubbleData);

 }
private initSvg() {
this.pack = d3.layout.pack()
  .padding(150)
  .size([this.diameter - this.margin, this.diameter - this.margin])
  .value(function (d) { return d.size; });

this.svg = d3.select('svg').append('g')
  .attr('transform', 'translate(' + this.diameter / 1.5 + ',' + this.diameter / 3 + ')');
}

private drawSVG(root) {
this.pack.nodes(root);
let view;

let tooltip = d3.select('body')
  .append('div')
  .style('position', 'absolute')
  .style('z-index', '10')
  .style('visibility', 'hidden');

let circle = this.svg.selectAll('circle')
  .data(root.children)
  .enter().append('circle')
  .attr('class', 'node')
  .style('fill', 'rgba(124, 230, 124, 0.5)')
  .style('stroke', 'green')
  .on('mouseover', (d) => { showToolTip.call(this, d), d3.event.stopPropagation(); })
  .on('mousemove',
  function () { return tooltip.style('top', (d3.event.pageY - 10) + 'px').style('left', (d3.event.pageX + 10) + 'px'); })
  .on('mouseout', function () { return tooltip.style('visibility', 'hidden'); });

this.svg.selectAll('text')
  .data(root.children)
  .enter().append('text')
  .attr('class', 'label')
  .style('fill-opacity', function (d) { return d.parent === root ? 1 : 0; })
  .style('display', function (d) { return d.parent === root ? 'inline' : 'none'; })
  .text(function (d) { return d.name; })
  .on('mouseover', (d) => { showToolTip.call(this, d), d3.event.stopPropagation(); })
  .on('mousemove',
  function () { return tooltip.style('top', (d3.event.pageY - 10) + 'px').style('left', (d3.event.pageX + 10) + 'px'); })
  .on('mouseout', function () { return tooltip.style('visibility', 'hidden'); });

let node = this.svg.selectAll('circle,text');
showCircle.call(this, [root.x, root.y, root.r * 2 + this.margin]);


function showToolTip(d) {
  tooltip.html("<div class='result_tooltip'><span class='result_name'>"
    + d.name + "</span><span class='result_num'>" + d.size + "</span></div>");
  tooltip.style('visibility', 'visible');
}

function showCircle(v) {
  const k = this.diameter / v[2]; view = v;
  node.attr('transform', function (d) { return 'translate(' + (d.x - v[0]) * k + ',' + (d.y - v[1]) * k + ')'; });
  circle.attr('r', function (d) { return d.r * k; });
}
}
}

Ширина моего контейнера составляет 900 пикселей и такая же для SVG, но элемент g внутри SVG занимает всего 350 ширины. При увеличении диаметра высота тоже увеличивается. Я просто хочу увеличить размер или разбросать все пузырьки в контейнере.