<html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id = "svgcontainer"></div> <script> var width = 300; var height = 300; var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height); svg.append("ellipse") .attr("cx", 200) .attr("cy", 50) .attr("rx", 100) .attr("ry", 50) .attr("fill", "green") </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id = "svgcontainer"></div> <script> var width = 300; var height = 300; //Create SVG element var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height); //Append circle svg.append("circle") .attr("cx", 200) .attr("cy", 50) .attr("r", 20) .attr("fill", "green"); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id = "svgcontainer"></div> <script> var width = 300; var height = 300; //Create SVG element var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height); //Create and append rectangle element svg.append("rect") .attr("x", 20) .attr("y", 20) .attr("width", 200) .attr("height", 100) .attr("fill", "green"); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <div id = "svgcontainer"> </div> <script language = "javascript"> var width = 300; var height = 300; var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height); svg.append("line") .attr("x1", 100) .attr("y1", 100) .attr("x2", 200) .attr("y2", 200) .style("stroke", "rgb(255,0,0)") .style("stroke-width", 2); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <div id = "svgcontainer"> <svg width = "300" height = "300"> <line x1 = "100" y1 = "100" x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0); stroke-width:2"/> </svg> </div> <p></p> <p></p> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <p></p> <p></p> <p></p> <script> var data = [1, 2, 3]; var paragraph = d3.select("body") .selectAll("p") .data(data) .text(function (d, i) { console.log("d: " + d); console.log("i: " + i); console.log("this: " + this); return "The index is " + i + " and the data is " + d; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <p></p> <div></div> <script> d3.select("p") .datum(50) .text(function(d) { return "Used existing paragraph element and the data " + d + " is assigned."; }); d3.select("div") .datum(100) .append("p") .text(function(d) { return "Created new paragraph element and the data " + d + " is assigned."; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <ul id = "list"> <li></li> <li></li> </ul> <input type = "button" name = "remove" value = "Remove fourth value" onclick = "javascript:remove()" /> <script> d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return "This is pre-existing element and the value is " + d; }) .enter() .append("li") .text(function(d) { return "This is dynamically created element and the value is " + d; }); function remove() { d3.selectAll("li") .data([10, 20, 30, 15]) .exit() .remove() } </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <h2 class = "myclass">Message</h2> <div class = "myclass"> Hello World! </div> <script> d3.selectAll(".myclass").attr("style", "color: red"); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> d3.select(".myclass").style("color", "red"); </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more