Wie Gruppe in d3 Balkendiagramm

Question

Ich versuche, einen gestapelt, gruppierte, Balkendiagramm in d3 zu erstellen, und ich bin ein Problem bekommen, wenn ich versuche, eine rect hinzuzufügen, die über die Gruppe geht, aber es erzeugt die für jede Gruppe gleich rect (so verdoppelt es für jede Gruppe alle Gruppenwerte). 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> 

Irgendwelche Vorschläge:

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'; }); 

Der Code/Demo finden Sie hier?

Answer 1

Offenbar war es ein Fall von mir läuft es über die gesamte

.data(data) 

statt

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

Letzteres war nicht für mich zu arbeiten, weil es sich um ein einzelnes Objekt ist und d3 erwartete ein Array - also musste ich es ändern:

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