d3.select('.bar-chart').
selectAll('div').
data([194, 52, 228, 268, 163, 138, 92]).
enter().
append('div').
style ('width', function(d) {return d + "px"}).
text ( function(d) {return d });
For each of the data-elements (194, 52, 268 etc), a new div is append
ed with its css width style set to the respective px width.
Since the divs are transparent per default, a bit of css is needed to make them visible:
.bar-chart div {
background-color:#fa5;
margin: 2px;
color: #713;
text-align: right}
Result:
github link
No comments:
Post a Comment