123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <!--
- <html>
- <body>
- sdasdasd
- </body>
- </html>
- -->
-
- <meta charset="utf-8">
- <html>
- <header><title>This is title</title></header>
- <style type="text/css">
- /* 13. Basic Styling with CSS */
- /* Style the lines by removing the fill and applying a stroke */
- .line {
- fill: none;
- stroke: #ffab00;
- stroke-width: 3;
- }
-
- .overlay {
- fill: none;
- pointer-events: all;
- }
- /* Style the dots by assigning a fill and stroke */
- .dot {
- fill: #ffab00;
- stroke: #fff;
- }
-
- .focus circle {
- fill: none;
- stroke: steelblue;
- }
- .dot-focus{
- fill: #ffffff;
- stroke: steelblue;
- }
- </style>
- <body>
- <script src="d3.v5.min.js"></script>
- <script>
- var margin = {top: 10, right: 50, bottom: 50, left: 50}
- , width = window.innerWidth - margin.left - margin.right // Use the window's width
- , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
- // The number of datapoints
- var n = 101;
- // 5. X scale will use the index of our data
- var xScale = d3.scaleLinear()
- .domain([0, n-1]) // input
- .range([0, width]); // output
- // 6. Y scale will use the randomly generate number
- var yScale = d3.scaleLinear()
- .domain([0, 1]) // input
- .range([height, 0]); // output
- // 7. d3's line generator
- var line = d3.line()
- .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
- .y(function(d) { return yScale(d.y); }) // set the y values for the line generator
- .curve(d3.curveMonotoneX) // apply smoothing to the line
- // 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
- var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })
- // 1. Add the SVG to the page and employ #2
- var svg = d3.select("body").append("svg")
- .attr("width", width + margin.left + margin.right -25)
- .attr("height", height + margin.top + margin.bottom -25)
- //.attr("preserveAspectRatio", "xMinYMin meet")
- //.attr("viewBox", "0 0 " + width + " " + height)
- .append("g")
- .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
- // 3. Call the x axis in a group tag
- svg.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + height + ")")
- .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
- // 4. Call the y axis in a group tag
- svg.append("g")
- .attr("class", "y axis")
- .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
- // 9. Append the path, bind the data, and call the line generator
- var path = svg.append("path")
- .datum(dataset) // 10. Binds data to the line
- .attr("class", "line") // Assign a class for styling
- .attr("d", line); // 11. Calls the line generator
- // 12. Appends a circle for each datapoint
- svg.selectAll(".dot")
- .data(dataset)
- .enter().append("circle") // Uses the enter().append() method
- .attr("class", "dot") // Assign a class for styling
- .attr("cx", function(d, i) { return xScale(i) })
- .attr("cy", function(d) { return yScale(d.y) })
- .attr("r", 5)
- .on("mouseover", function(a, b, c) {
- console.log(a)
- d3.select(this).attr('class', 'dot-focus')
- })
- .on("mouseout", function(a, b, c) {
- console.log(a)
- d3.select(this).attr('class', 'dot')
- })
- function redraw(){
- width = window.innerWidth - margin.left - margin.right;
- height = window.innerHeight - margin.top - margin.bottom;
- console.log("redraw w:" + width + " h:" + height);
- //path.attr("d", line)
- //.attr("transform", null)
- //.transition()
- //.attr("transform", "translate(" + "0" + ",100)")
- //.duration(300);
- }
- window.addEventListener("resize", redraw);
- </script>
- </body>
- </html>
|