d3js v4でバブルチャートを水平に配布する方法

Question

d3js v4を使用してバブルチャートを作成しています。私は1000pxの幅と500pxの高さsvgを持っていて、カテゴリごとにグループ化しながら気泡を水平に分散したい。それらをグループ化するために、私は階層化を使用しています。パックレイアウトを使用すると、サークルが円のパターンで広がっているので、高さによって制限されます。

にはどうすればより多くの水平気泡を配布することができますか？

これは私のコードです：そのd.xを掛ける

.attr('transform', function(d: any) { return 'translate(' + d.x * 1.5 + ',' + d.y + ')'; }); 

円を広める必要があります：あなたはとてもようなXの翻訳が増加する

 let svg = d3.select('svg#circle'), 
      width = 1000, 
      height = +svg.attr('height'); 
     svg.attr('width', width); 

     let stratify = d3.stratify() 
      .id((d: any) => d.name) 
      .parentId(function(d: any) { return d.categoryId; }); 

     let pack = d3.pack() 
      .size([width, height]) 
      .padding(20); 

     let root = stratify(this.subcategoryData) 
      .sum(function(d: any) { return d.total; }) 
      .sort(function(a: any, b: any) { return b.total - a.total; }); 

     let node = svg.selectAll('.node') 
       .data(pack(root).leaves()) 
       .enter().append('g') 
       .attr('class', 'node') 
       .style('text-anchor', 'middle') 
       .attr('transform', function(d: any) { return 'translate(' + d.x + ',' + d.y + ')'; }); 

      let div = d3.select('body').append('div') 
       .attr('class', 'tooltip') 
       .style('opacity', 0); 

      node.append('circle') 
       .attr('id', function(d: any) { return d.id; }) 
       .attr('r', function(d: any) { return d.r; }) 
       .attr('class', (d: any) => `circle-${d.data.categoryId}`); 

Answer 1

てみました。たぶんそれは1.5と動作しない場合は何かを試してみてください。

希望しました。