d3棒グラフでグループ化する方法

Question

d3で積み重ねられたグループ化棒グラフを作成しようとしていますが、グループを横切る矩形を追加しようとすると問題が発生しますが、各グループに対して同じ矩形（したがって、グループごとにすべてのグループ値を複製します）。

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 + ")"); 

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0, " + height + ")") 
    .call(d3.svg.axis().scale(x).orient('bottom').ticks(12)); 

    var loads = svg.selectAll(".load") 
    .data(data) 
    .enter() 
    .append("g") 
     .attr("class", "load"); 

    loads.selectAll(".actexit") 
     .data(data, keyFunction) 
     .enter() 
    .append("rect") 
    .attr("class", "actexit") 
    .attr("width", function(d) {return x(d.returnTime) - x(d.exitTime); }) 
    .attr("x", function(d) { return x(d.exitTime); }) 
    .attr("y", function(d) { return y0(`${d.truck}${d.order}`); }) 
    .attr("height", function(d) { return y0.rangeBand(); }) 
    .attr("fill", function(d) { return 'blue'; }); 

    loads.selectAll(".expexit") 
     .data(data, keyFunction) 
     .enter() 
    .append("rect") 
    .attr("class", "expexit") 
    .attr("width", function(d) { console.log(d); return '2px'; }) 
    .attr("x", function(d) { return x(d.predictedExitTime); }) 
    .attr("y", function(d) { return y0(`${d.truck}${d.order}`); }) 
    .attr("height", function(d) { return y0.rangeBand(); }) 
    .attr("fill", function(d) { return 'red'; }); 

コード/デモはここで見つけることができます：https://jsbin.com/heyuloz/2/edit?html,output

<svg width="960" height="500"> 
    <g transform="translate(40,20)"> 
     <g class="load"> 
      <rect class="actexit" width="56.94444444444457" x="626.3888888888888" y="21.42857142857143" height="192.85714285714286" fill="blue"></rect> 
      <rect class="actexit" width="79.72222222222229" x="398.6111111111111" y="235.71428571428572" height="192.85714285714286" fill="blue"></rect> 
      <rect class="expexit" width="2px" x="615" y="21.42857142857143" height="192.85714285714286" fill="red"></rect> 
      <rect class="expexit" width="2px" x="410" y="235.71428571428572" height="192.85714285714286" fill="red"></rect> 
     </g> 
     <g class="load"> 
      <rect class="actexit" width="56.94444444444457" x="626.3888888888888" y="21.42857142857143" height="192.85714285714286" fill="blue"></rect> 
      <rect class="actexit" width="79.72222222222229" x="398.6111111111111" y="235.71428571428572" height="192.85714285714286" fill="blue"></rect> 
      <rect class="expexit" width="2px" x="615" y="21.42857142857143" height="192.85714285714286" fill="red"></rect> 
      <rect class="expexit" width="2px" x="410" y="235.71428571428572" height="192.85714285714286" fill="red"></rect> 
     </g> 
    </g> 
</svg> 

任意の提案？それは単一のオブジェクトであるため、

Answer 1

は、どうやらそれは私の場合は、後者が私のために働いていなかった

.data(function(d) { return d; }). 

のではなく、全体

.data(data) 

上でそれを実行していたとd3は期待していました配列 - 私はそれを変更しなければならなかったので：

.data(function(d) { return [d]; }