d3 막 대형 차트로 그룹화하는 방법

d3에서 스택 형, 그룹화 된 막 대형 차트를 만들려고합니다. 그룹을 가로 지르는 직사각형을 추가하려고하는데 문제가 발생합니다. 각 그룹에 대해 동일한 rect (따라서 모든 그룹 값에 대해 각 그룹에 대해 중복됩니다). 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>

어떤 제안? 그것은 하나의 객체이기 때문에

출처

2016-06-30 crucible

녹색과 파란색 막대가 바로 스택해야합니다. 당신이 스크린 샷을 공유 할 수있는 방법, 어떻게해야합니까 보기? –

@NagaSaiA에 대한 의견을 보내 주셔서 감사합니다. 예, 다음에 정렬 된 녹색 막대를 가져야합니다. – crucible

지금은 아무런 문제가 없습니다 :) –

은 분명히 그것은 나의 경우는 후자 나를 위해 작동하지 않는

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

보다는 전체

.data(data)

에 그것을 실행되고 D3는 기다리고 있었다 배열 - 그래서 그것을 변경했다 :

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

출처

2016-07-01 00:10:09 crucible

d3 막 대형 차트로 그룹화하는 방법

답변

관련 문제