<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<!-- <p>Hello World 1</p>
<p>Hello World 2</p> -->
<div id="con"></div>
<div id="chart01"></div>
<bottom><button type="button" onclick="myadd()">add</button><button type="button" onclick="mysort()">sort</button></bottom>
<script src="./jquery-2.1.4.min.js" charset="utf-8"></script>
<script src="./d3.js" charset="utf-8"></script>
<script>
// var p = d3.select("body").selectAll("p");
// // p.datum("Thunder").append("span").text(function(d, i) {
// // return d + " " + i;
// // }); // var dataset = [{"id":1, "name":"张三"},
// {"id":2, "name":"张三2"},
// {"id":3, "name":"张三3"},
// {"id":4, "name":"张三4"}];
// var update = p.data(dataset); // update.text(function(d) {
// return d.id + "--" + d.name;
// }); // update.enter().append("p").text(function(d) {
// return d.id + "--" + d.name;
// }); // var condiv = d3.select(document.getElementById("con")); // condiv.selectAll("span").data(dataset).enter().append("span").text(function(d) {
// return d.id + "---" + d.name;
// }); // var numbers = [12, 23, 25, 67, 5, 26, 19, 8];
// console.log(d3.min(numbers, function(d) {return d * 3;}));
// console.log(d3.max(numbers));
// console.log(d3.extent(numbers, function(d) {
// return d % 3;
// }));
// console.log(d3.sum(numbers)); // console.log(d3.mean(numbers)); // console.log(d3.median(numbers));
// console.log(numbers.sort(d3.ascendind));
// console.log(d3.quantile(numbers, 19.0));
// p.data(dataset, function(d) {return d.id;}).text(function(d) {
// return d.id + " " + d.name;
// });
// console.log(update);
// console.log(update.enter());
// console.log(update.exit()); // console.log(p);
var dataset = [30, 45, 23, 69, 160, 55, 99];
var chart01 = d3.select(document.getElementById("chart01"));
var width = 800;
var height = 400;
var padding = {"top": 20, "right": 20, "left": 20, "bottom": 20};
var rectStep = 55;
var rectWidth = 45; var svg = chart01
.append("svg")
.attr("width", width)
.attr("height", height); var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "steelblue")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
}); var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
})
.attr("dx", rectWidth/2)
.attr("dy", "1em")
.text(function(d) {
return d;
}); function redraw(dataset) {
var updateRect = svg.selectAll("rect").data(dataset);
var enterRect = updateRect.enter();
var exitRect = updateRect.exit(); var updateText = svg.selectAll("text").data(dataset);
var enterText = updateText.enter();
var exitText = updateText.exit(); updateRect.attr("fill", "steelblue")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
}); enterRect.append("rect")
.attr("fill", "steelblue")
.attr("x", function(d, i) {
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
}); exitRect.remove(); updateText.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) {
console.log("de-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
})
.attr("dx", rectWidth/2)
.attr("dy", "1em")
.text(function(d) {
return d;
}); enterText.append("text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) { console.log("d-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));
return padding.left + i * rectStep;
})
.attr("y", function(d) {
return height - padding.bottom - d;
})
.attr("width", rectWidth)
.attr("height", function(d) {
return d;
})
.attr("dx", rectWidth/2)
.attr("dy", "1em")
.text(function(d) {
return d;
}); exitText.remove();
} function myadd() {
dataset.push(Math.floor(Math.random() * 100));
console.log(dataset);
redraw(dataset);
} function mysort() {
dataset.sort(d3.ascending);
redraw(dataset);
}
</script>
</body>
</html>