[英]Animate D3.js Bar Chart. From Bottom to Top. Please check the link for reference image
Below is my Code Snippet and Check the link for output please.下面是我的代码片段,请检查 output 的链接。 [Output graph demo][1] (Output coming from the code is top to bottom animation) [输出图演示][1](来自代码的输出是从上到下的动画)
Need to animate the bars from Bottom to Top Currently I am using transition and duration for animation and svgHeight being the bar height but somehow I am getting ended up with the animation as displayed in the [demo][1].需要从底部到顶部对条形进行动画处理目前我正在使用 animation 的过渡和持续时间,而 svgHeight 是条形高度,但不知何故,我最终得到了 [demo][1] 中显示的 animation。 Any Suggestions or help would be appreciated.任何建议或帮助将不胜感激。 I already tried to tweak some of the height and y attribute of the graph.我已经尝试调整图形的一些高度和 y 属性。
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
import { transformAll } from '@angular/compiler/src/render3/r3_ast';
@Component({
selector: 'app-scorebenchmarking',
templateUrl: './scorebenchmarking.component.html',
styleUrls: ['./scorebenchmarking.component.css'],
})
export class ScorebenchmarkingComponent implements OnInit {
dataset = [3, 2, 2, 3, 1, 2, 1, 1, 1, 1];
colors = [
'green',
'green',
'green',
'orange',
'orange',
'orange',
'orange',
'red',
'red',
'red'
];
listcompanies = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
svgWidth = 900;
svgHeight = 300;
barPadding = 5;
barWidth = this.svgWidth / this.dataset.length - 30;
clickObject = 0;
constructor() {}
ngOnInit(): void {
this.buildSvg();
}
buildSvg() {
var svg = d3
.select('svg')
.attr('width', this.svgWidth)
.attr('heigth', this.svgHeight);
var yScale = d3
.scaleLinear()
.domain([0, d3.max(this.dataset)])
.range([0, this.svgHeight - 30]);
var barchart = svg
.selectAll('rect')
.data(this.dataset)
.enter()
.append('rect')
.attr('class', (d: any, i: any) => {
return 'rect' + (i + 1);
})
.attr('fill', (d: any, i: any) => {
return this.colors[i];
})
.attr('y', (d: any) => {
return this.svgHeight - yScale(d);
})
.attr('height', (d: any) => {
return 0;
})
.attr('width', this.barWidth - this.barPadding)
.attr('transform', (d: any, i: any) => {
var translatenum = [this.barWidth * i, 0];
return 'translate(' + translatenum + ')';
})
.on('click', (d: any) => {
this.clickObject = d;
})
.on('mouseover', (d: any, i: any) => {
d3.select('.rect' + (i + 1))
.transition()
.duration('600')
.attr('opacity', '0.6');
})
.on('mouseout', (d: any, i: any) => {
d3.selectAll('.rect' + (i + 1))
.transition()
.duration('600')
.attr('opacity', '1');
});
var temp = d3
.selectAll('rect')
.transition()
.duration(1500)
.attr('height', (d: any) => {
return yScale(d);
});
var text = svg
.selectAll('text.no_of_companies')
.data(this.dataset)
.enter()
.append('text')
.text((d: any) => {
return d;
})
.attr('y', (d: any, i: any) => {
return this.svgHeight - yScale(d) - 6;
})
.attr('x', (d: any, i: any) => {
return this.barWidth * i + 24;
})
.attr('fill', 'black');
var sizeofaxis = (this.barWidth + this.barPadding) * 10 - 55;
var line = svg
.append('line')
.attr('x1', 0)
.attr('y1', this.svgHeight)
.attr('x2', sizeofaxis)
.attr('y2', this.svgHeight)
.attr('stroke', 'black');
var textforAxis = svg
.selectAll('text.axis_labels')
.data(this.listcompanies)
.enter()
.append('text')
.text((d: any) => {
return d;
})
.attr('y', (d: any, i: any) => {
return this.svgHeight + 20;
})
.attr('x', (d: any, i: any) => {
return this.barWidth * i + 24;
})
.attr('fill', 'black');
}
}
>This is my code .
>PLease Help
[1]: https://i.stack.imgur.com/CSpO9.gif
Set the initial height to yScale(d) and the transition height to 0. In d3, (0,0) refers to the top left corner.将初始高度设置为 yScale(d),将过渡高度设置为 0。在 d3 中,(0,0) 指的是左上角。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.