You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@senssoft.apache.org by ar...@apache.org on 2017/09/15 08:16:31 UTC
[08/10] incubator-senssoft-tap git commit: Vertical Bar Chart with
slanted labels and retrofitted for sankey-related histograms
Vertical Bar Chart with slanted labels and retrofitted for sankey-related histograms
Project: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/commit/b49299bd
Tree: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/tree/b49299bd
Diff: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/diff/b49299bd
Branch: refs/heads/ryan-sankey
Commit: b49299bd56b2d5543687dedf586e8224a72713f5
Parents: d1a77f8
Author: Arthi Vezhavendan <ar...@gmail.com>
Authored: Fri Sep 15 04:13:13 2017 -0400
Committer: Arthi Vezhavendan <ar...@gmail.com>
Committed: Fri Sep 15 04:13:13 2017 -0400
----------------------------------------------------------------------
.../components/visualizations/VerticalBar.jsx | 38 ++++++++++++++------
1 file changed, 27 insertions(+), 11 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/b49299bd/public/components/visualizations/VerticalBar.jsx
----------------------------------------------------------------------
diff --git a/public/components/visualizations/VerticalBar.jsx b/public/components/visualizations/VerticalBar.jsx
index 7e6659d..9e37ef4 100644
--- a/public/components/visualizations/VerticalBar.jsx
+++ b/public/components/visualizations/VerticalBar.jsx
@@ -33,8 +33,9 @@ class VerticalBar extends Component {
bottom : 30,
left : 40,
};
- this.fullWidth = 600;
- this.fullHeight = 300;
+ this.fullWidth = 1200;
+ this.fullHeight = 400;
+ this.axisHeight = 200;
this.width = this.fullWidth - this.margin.left - this.margin.right;
this.height = this.fullHeight - this.margin.top - this.margin.bottom;
@@ -82,32 +83,31 @@ class VerticalBar extends Component {
create() {
this.svg = d3.select(`#${this.d3element}`).append('svg')
.attr('width', this.fullWidth)
- .attr('height', this.fullHeight)
+ .attr('height', this.fullHeight+this.axisHeight)
.append('g')
.attr('transform', `translate(${this.margin.left},${this.margin.top})`);
this.svg.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0,${this.height})`)
- .selectAll("text")
- //.style("text-anchor", "end")
- //.attr("dx", "-.8em")
- //.attr("dy", "-.55em")
- .attr("transform", "rotate(90)" ); //TODO: text on x axis not rotating
+ //.call(this.xAxis)
this.svg.append('g')
- .attr('class', 'y axis');
+ .attr('class', 'y axis')
+ //.call(this.yAxis);
this.update();
}
update() {
let data = this.props.data;
- console.log("update vertical-bar data:");
- console.log(data);
+ //console.log("update vertical-bar data:");
+ //console.log(data);
//let grouped = this.props.grouped; //grouped is for ab testing
let grouped = false;
+ d3.selectAll(".x.axis").remove();
+
let t = d3.transition()
.duration(500);
@@ -119,6 +119,22 @@ class VerticalBar extends Component {
this.svg.select('.x.axis').call(this.xAxis);
this.svg.select('.y.axis').call(this.yAxis);
+ // this.svg.selectAll('text').exit()
+ // .attr('class', 'exit')
+ // .transition(t)
+ // .remove();
+
+ this.svg.append('g')
+ .attr('class', 'x axis')
+ .attr('transform', `translate(0,${this.height})`)
+ .call(this.xAxis)
+ .selectAll("text")
+ .style("text-anchor", "start")
+ .attr("dx", "1em")
+ .attr("dy", "-.5em")
+ // .attr("y", ".8em")
+ .attr("transform", "rotate(70)");
+
this.groups = this.svg.selectAll('.group')
.data(data, (d) => d.target);