You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
798 B
JavaScript
32 lines
798 B
JavaScript
5 years ago
|
function myFunction() {
|
||
|
|
|
||
|
|
var data = [4, 8, 15, 16, 23, 42];
|
||
|
|
var svg = d3.select("body")
|
||
|
|
.append('svg')
|
||
|
|
.attr("width",500)
|
||
|
|
.attr("height",200);
|
||
|
|
|
||
|
|
// callback function form the string "translate(20, i*25)"
|
||
|
|
svg.selectAll("rect")
|
||
|
|
.data(data)
|
||
|
|
.enter().append("rect")
|
||
|
|
.attr("transform",function(d, i) { return "translate(" + 20 + "," + i*25 + ")" })
|
||
|
|
.attr("fill","blue")
|
||
|
|
.attr("height",20)
|
||
|
|
.attr("width", function(d) { return d * 10 + "px"; });
|
||
|
|
|
||
|
|
svg.selectAll("text")
|
||
|
|
.data(data)
|
||
|
|
.enter().append("text")
|
||
|
|
.attr("transform",function(d, i) { return "translate(0," + Number(i*25+15) + ")" })
|
||
|
|
.attr("fill",'red')
|
||
|
|
.text(function(d) { return d });
|
||
|
|
|
||
|
|
/* Transition
|
||
|
|
var t = d3.transition()
|
||
|
|
.delay(2000).duration(2000);
|
||
|
|
d3.selectAll("rect")
|
||
|
|
.transition(t)
|
||
|
|
.style("fill", "red");
|
||
|
|
*/
|
||
|
|
}
|