SHARE
TWEET

Exercise.js

a guest Jan 21st, 2020 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var svgBox = d3.select("body")
  2.                .append("svg")
  3.                .attr("width", 1000)
  4.                .attr("height", 1000);
  5.  
  6. //Draw circles driven by data: let the data points be the radius
  7. var circleData=[40, 20, 10];
  8. var circles = svgBox.selectAll("circle")
  9.                     .data(circleData)
  10.                     .enter()
  11.                     .append("circle")
  12.                     .attr("cx", function(d, i) {
  13.                         return (i + 1) * 80;
  14.                     })
  15.                     .attr("cy", 80)
  16.                     .attr("r", function(d) {
  17.                         return d;
  18.                     })
  19.                     .style("fill", "brown");
  20.  
  21. //Draw ellipse drvien by data, let the data points be rx and set ry as 10 constantly.
  22. var ellipseData=[5,11,18];
  23. var ellips = svgBox.selectAll("ellipse")
  24.                    .data(ellipseData)
  25.                    .enter()
  26.                    .append("ellipse")
  27.                    .attr("cx", function(d, i) {
  28.                         return (i + 1) * 80;
  29.                    })
  30.                    .attr("cy", 150)
  31.                    .attr("rx", function(d) {
  32.                         return d;
  33.                    })
  34.                    .attr("ry", 10);
  35.  
  36. //Draw rectangles driven dy data, let the data points drive width and set height to be 20.
  37. var rectData=[7,13,22];
  38. var rectangle = svgBox.selectAll("rect")
  39.                    .data(rectData)
  40.                    .enter()
  41.                    .append("rect")
  42.                    .attr("x", function(d, i) {
  43.                         return (i + 1) * 80;
  44.                    })
  45.                    .attr("y", 200)
  46.                    .attr("width", function(d) {
  47.                         return d;
  48.                    })
  49.                    .attr("height", 20);
  50.  
  51.  
  52. //Draw curves driven by data
  53. var interpolateTypes = [d3.curveLinear, d3.curveNatural,d3.curveStep, d3.ccurveBasis, d3.curveBundle,d3.curveCardinal];
  54. var lineData = [
  55.   { x: 1,   y: 5},
  56.   { x: 20,  y: 20},
  57.   { x: 40,  y: 10},
  58.   { x: 60,  y: 40},
  59.   { x: 80,  y: 5},
  60.   { x: 100, y: 60}
  61. ];
  62.  
  63. var newX = 400, newY = 50,
  64.     scaleX = 3, scaleY = 3;
  65.  
  66. var drawLine = d3.line()
  67.                  .x(function (d, i) {
  68.                     return d.x*2+ newX;
  69.                  })
  70.                  .y(function (d, i) {
  71.                     return d.y*2 + newY;
  72.                  })
  73.                  .curve(interpolateTypes[1]);
  74.  
  75. var aPath = svgBox.append("path")
  76.                   .attr("d", drawLine(lineData))
  77.                   .style("fill", "none")
  78.                   .style("stroke", "pink");
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top