d3.js Box Plot Positioning with box.js

Question

d3とAngularJSを使用するデータ視覚化インターフェイスの一部としてボックスプロットを実装しようとしています。私はこのボックスプロットパッケージで働いています：https://bl.ocks.org/mbostock/4061502。

しかし、サンプルコードのどの部分がボックスプロットの位置を制御しているのかわかりません。この例では、5つのボックスプロットが順番に並べられています。私のプロットを生成しようとすると、それらはすべて互いに上に表示されます。ここで

私は箱ひげ図を生成するために使用しているコードです：

  boxplots = svg.selectAll("svg") 
       .data(boxPlotData) 
       .enter().append("svg") 
       .attr("class", "box") 
       .attr("width", boxWidth + margin.left + margin.right) 
       .attr("height", boxHeight + margin.bottom + margin.top) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
       .call(chart); 

は、ここに私のSVGキャンバスを作成する方法のためのコードです。これは、角度指令で行われます。

template:"<svg width='825' height='600'></svg>", 
    link: function($scope, elem){ 

     var d3 = $window.d3; 
     var rawSvg=elem.find('svg'); // this is the svg created in the template 

     var width = rawSvg[0].attributes[0].value; 
     var height = rawSvg[0].attributes[1].value; 

     var svg = d3.select(rawSvg[0]); 

編集：まだ完璧ではないが、行き方：

Answer 1

は何が必要なの内箱のためのSVG要素を配置する順序尺度であります親のsvg。 widthと仮定すると、あなたの親SVG要素の幅を表し、dataあなたは、スケールの作成にこれを使用することができ、あなたのデータ要素の配列である：あなたが今使用できるSVGの作成内

const x = d3.scaleBand() 
       .range([0, width]) 
       .domain(data.map((el,i) => i)); 

を

boxplots = svg.selectAll("svg") 
       .data(boxPlotData) 
       .enter().append("svg") 
       .attr("x", (d,i) => x(i)) // this is added 
       .attr("class", "box") 
       .attr("width", boxWidth + margin.left + margin.right) 
       .attr("height", boxHeight + margin.bottom + margin.top) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
       .call(chart); 

PS：これはd3jsのv4を使用することを前提としています。スケールのv3の構文は異なります。

PPS：現在のところ、コードをテストすることはできませんが、説明どおりに動作するはずです。