Now let's start with d3.js to deal with the first simple question, and look at the following code:
[html]View PlainCopy
- <html>
- <head>
- <meta charset="utf-8">
- <title>helloworld</title>
- </head>
- <body>
- <P>hello World 1</P>
- <p>hello World 2</P>
- </Body>
- </html>
If you have studied html, you should know that two lines of text will be printed on the screen, such as:
What if you want to use JavaScript to change these two lines of text? We will add the code into:
[html]View PlainCopy
- <html>
- <head>
- <meta charset="utf-8">
- <title>helloworld</title>
- </head>
- <body>
- <P>hello World 1</P>
- <p>hello World 2</P>
- <script>
- var paragraphs = document.getElementsByTagName ("p");
- For (var i = 0; i < paragraphs.length; I++) {
- var paragraph = Paragraphs.item (i);
- paragraph.innerhtml = "I like dog.";
- }
- </Script>
- </Body>
- </html>
The result becomes:
As you can see, using javascript, we've added 4 lines of code, What if we use d3.js? Just add one line of Code. Be careful not to forget to refer to the D3.js source File.
[html]View PlainCopy
- <html>
- <head>
- <meta charset="utf-8">
- <title>helloworld</title>
- </head>
- <body>
- <P>hello World 1</P>
- <p>hello World 2</P>
- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></ Script>
- <script>
- D3.select ("body"). selectall ("p"). text ("www.ourd3js.com");
- </Script>
- </Body>
- </html>
The results will change to:
Similar to JavaScript like jquery, it simplifies the process of using Javascript.
Next change the font color and size, as Follows:
[html]View PlainCopy
- var p = d3.select ("body"). selectall ("p"). text ("www.ourd3js.com");
- P.style ("color", "red");
- P.style ("font-size", "72px");
You can see that the above code assigns a value to the variable p before using P. This will make the code cleaner.
From: blog home: http://www.ourd3js.com/, csdn blog Home for: http://blog.csdn.net/lzhlzz/. Reprint Please indicate the source, thank you.
"d3.js starter series---1" First program HelloWorld