1. ホーム
  2. 質問と答え
  3. d3トランジションバーグラフ

d3トランジションバーグラフ

2017-05-01 6 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]) })

私は、各矩形は500ミリ秒でその全幅に成長し、各矩形と共に成長遅延を持つことが期待されます。

D3 v4でトランジションを正しく実装するにはどうすればよいですか？

出典

2017-05-01 Alex Fallenstedt

答えて

1

コードでは、ポイントAからポイントAに移行しようとしています。あなたは、これは私たちに

enter image description here

を、このような結果が得られます0

.attr("width", 0)

にする必要があり、あなたのバーは幅移行前 だから、0から点A

に移行する必要があります

あなたが見ることができる、そのバーは移行していますが、1つのグループではありません

ので、我々はまた、移行

.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

完全に動作するスニペットを見ることができます！私は今私が間違っていることを理解しています。あなたの説明はとても助けになりました。 –

関連する問題

 関連する問題