1. 홈
  2. 질의 응답
  3. d3 전환 막대 그래프

d3 전환 막대 그래프

2017-05-01 1 views
1

나는 잠시 동안 머리를 긁적 거리며 d3 v4 전환이 어떻게 작동하는지 명확히하는 데 도움이되기를 바랍니다.d3 전환 막대 그래프

나는 막대 그래프를 가지고 있는데 막대의 너비가 커지려고합니다.

You can see the current bargraph here 선 36은 직사각형을 그립니다.

layer.selectAll("rect") 
    .data(function(d) { return d; }) 
    .enter().append("rect") 
    .attr("y", function(d) { return yScale(parseDate(d.data.date)); }) 
    .attr("x", function(d) { return xScale(d[0]); }) 
    .attr("height", yScale.bandwidth()) 
    .attr("width", function(d) { return xScale(d[1]) - xScale(d[0]) }) 
    .transition() //start transition here 
    .duration(500) 
    .delay(function(d,i) { return i * 100 }) 
    .attr("width", function(d) { return xScale(d[1]) - xScale(d[0]) })

나는 각각의 사각형은 500ms에서의 전체 폭으로 성장하고, 각 사각형 성장 지연을 기대 :

는 그리고 내가 무엇을 시도하고 각 줄과 같이 전환됩니다.

D3 v4에서 전환을 올바르게 구현하려면 어떻게해야합니까?

출처

2017-05-01 Alex Fallenstedt

답변

1

코드에서 A 지점에서 A 지점으로 전환하려고합니다. 그래서 당신의 바 너비 전환 이전 이 필요

0

.attr("width", 0)

으로 당신이 우리에게 같은 결과를 줄 것이다 0에서 점 A로 전환 할 필요가

enter image description here

막대가 전환되지만 하나의 그룹이 아닙니다.

(210)

그래서 우리는 또한 전환

.attr("x", 0)

전에 x 속성 을 변경하고 전환 후 이전 행 를 이동할 수 있습니다

.attr("x", function(d) { return xScale(d[0]); })

결과 :

enter image description here

여기에 전체 작업 조각 

<!DOCTYPE html> 
 
<html > 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /> 
 
    <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /> 
 
    <title>CodePen - Stacked Bar Chart D3</title> 
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
</head> 
 

 
<body translate="no" > 
 

 
    <div id='stacked-bar'></div> 
 
    
 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js'></script> 
 

 
    <script> 
 
    var initStackedBarChart = { 
 
\t draw: function(config) { 
 
     let me = this; 
 
     let domEle = config.element; 
 
     let stackKey = config.key; 
 
     let data = config.data; 
 
     let margin = {top: 20, right: 20, bottom: 30, left: 60}; 
 
     let parseDate = d3.timeParse("%m/%Y"); 
 
     let width = 390 - margin.left - margin.right; 
 
     let height = 500 - margin.top - margin.bottom; 
 
     let xScale = d3.scaleLinear().rangeRound([0, width]); 
 
     let yScale = d3.scaleBand().rangeRound([height, 0]).padding(0.1); 
 
     let color = d3.scaleOrdinal(d3.schemeCategory20); 
 
\t \t svg = d3.select("#"+domEle).append("svg") 
 
\t \t \t \t .attr("width", width + margin.left + margin.right) 
 
\t \t \t \t .attr("height", height + margin.top + margin.bottom) 
 
\t \t \t \t .append("g") 
 
\t \t \t \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
\t \t var stack = d3.stack() 
 
\t \t \t .keys(stackKey) 
 
\t \t \t /*.order(d3.stackOrder)*/ 
 
\t \t \t .offset(d3.stackOffsetNone); 
 
\t 
 
\t \t var layers= stack(data); 
 
\t \t \t data.sort(function(a, b) { return b.total - a.total; }); 
 
\t \t \t yScale.domain(data.map(function(d) { return parseDate(d.date); })); 
 
\t \t \t xScale.domain([0, d3.max(layers[layers.length - 1], function(d) { return d[0] + d[1]; }) ]).nice(); 
 

 
\t \t var layer = svg.selectAll(".layer") 
 
\t \t \t .data(layers) 
 
\t \t \t .enter().append("g") 
 
\t \t \t .attr("class", "layer") 
 
\t \t \t .style("fill", function(d, i) { return color(i); }); 
 

 
    //How can I animate the rectangles growing? 
 
\t \t layer.selectAll("rect") 
 
\t \t \t .data(function(d) { return d; }) 
 
\t \t \t .enter().append("rect") 
 
\t \t \t .attr("y", function(d) { return yScale(parseDate(d.data.date)); }) 
 
\t \t \t .attr("x", function(d) { return 0; return xScale(d[0]); }) 
 
\t \t \t .attr("height", yScale.bandwidth()) 
 
\t \t \t .attr("width", function(d) { return 0; return xScale(d[1]) - xScale(d[0]) }) 
 
     .transition() 
 
      .duration(500) 
 
      .delay(function(d,i) { return i * 1000 }) 
 
      .attr("x", function(d) { return xScale(d[0]); }) 
 
      .attr("width", function(d) { return xScale(d[1]) - xScale(d[0]) }) 
 

 
\t \t \t svg.append("g") 
 
\t \t \t .attr("class", "axis axis--x") 
 
\t \t \t .attr("transform", "translate(0," + (height+5) + ")") 
 
\t \t \t .call(xAxis); 
 

 
\t \t \t svg.append("g") 
 
\t \t \t .attr("class", "axis axis--y") 
 
\t \t \t .attr("transform", "translate(0,0)") 
 
\t \t \t .call(yAxis); \t \t \t \t \t \t \t 
 
\t } 
 
} 
 
var data = [{"date":"4/1854","total":8571,"disease":1,"wounds":0,"other":5},{"date":"5/1854","total":23333,"disease":12,"wounds":0,"other":9},{"date":"6/1854","total":28333,"disease":11,"wounds":0,"other":6},{"date":"7/1854","total":28772,"disease":359,"wounds":0,"other":23},{"date":"8/1854","total":30246,"disease":828,"wounds":1,"other":30},{"date":"9/1854","total":30290,"disease":788,"wounds":81,"other":70},{"date":"10/1854","total":30643,"disease":503,"wounds":132,"other":128},{"date":"11/1854","total":29736,"disease":844,"wounds":287,"other":106},{"date":"12/1854","total":32779,"disease":1725,"wounds":114,"other":131},{"date":"1/1855","total":32393,"disease":2761,"wounds":83,"other":324},{"date":"2/1855","total":30919,"disease":2120,"wounds":42,"other":361},{"date":"3/1855","total":30107,"disease":1205,"wounds":32,"other":172},{"date":"4/1855","total":32252,"disease":477,"wounds":48,"other":57},{"date":"5/1855","total":35473,"disease":508,"wounds":49,"other":37},{"date":"6/1855","total":38863,"disease":802,"wounds":209,"other":31},{"date":"7/1855","total":42647,"disease":382,"wounds":134,"other":33},{"date":"8/1855","total":44614,"disease":483,"wounds":164,"other":25},{"date":"9/1855","total":47751,"disease":189,"wounds":276,"other":20},{"date":"10/1855","total":46852,"disease":128,"wounds":53,"other":18},{"date":"11/1855","total":37853,"disease":178,"wounds":33,"other":32},{"date":"12/1855","total":43217,"disease":91,"wounds":18,"other":28},{"date":"1/1856","total":44212,"disease":42,"wounds":2,"other":48},{"date":"2/1856","total":43485,"disease":24,"wounds":0,"other":19},{"date":"3/1856","total":46140,"disease":15,"wounds":0,"other":35}]; 
 
var key = ["wounds", "other", "disease"]; 
 
initStackedBarChart.draw({ 
 
\t data: data, 
 
\t key: key, 
 
\t element: 'stacked-bar' 
 
}); 
 
    </script> 
 

 
    
 
    
 

 
</body> 
 
</html>
을 볼 수 있습니다

출처

2017-05-01 19:41:05 bumbeishvili

+1

감사합니다! 나는 이제 내가 잘못하고있는 것을 이해한다. 당신의 설명이 많은 도움이되었습니다. –

관련 문제

 관련 문제