zoukankan      html  css  js  c++  java
  • Learning D3.js with App iLearning D3.js

    Introduction of iLearning app

    iLearning is a learning and interactive coding environment. 'i' means interactive. With this app, we provide some tutorials. And at the same time, you can also try the code in these tutorials yourself in this App. And there is also a simulated "console", which can be used to enter some js code to run.

    So this app is a greate combination of tutorialeditor, and debuger. We hope it can help you during the learning.

    You can download it from app store.

    iLearning Functions

    There will be 3 main screens in this app, "tutorial" screen, "try" screen and "render" screen.

    "tutorial" screen:

    You can find the tutorial when the app runs. 

    tutorial screen

    "try" screen:

    In this place, you can try the code learned from the tutorial. For convenience, we provide 3 file: html, js and css separately. You should add your html elements in html file, add js function and code in js file, and css style in css file. 

    try screen

    "render" screen:

    After you write some code in "try", and you can tap on the render button to check the result in web view. 

    And, there is a console in this screen, you can input some js code and run it in the reder view. To get the previous/next command, you can tap "^"/"∨". After you run a command, you can get some result in the view above. 

    render screen

    First Try

    Now, let run a js command in the render view to check.

    In initial, there will be a line of js code in console, you can just run it. Then you should see that it will creat one circle svg element in the html.

    In the console, type the following:

    1alert("hello!");

     

    This will cause a popup alert to pop up and say "Hello!". This is what it looks like in iPad: 

    alert screen

    Now to test if D3.js is loaded correctly. Type a lowercase "d3.version" into the Console and tap "Run", you should see the d3.js version we used:

    1d3.version
    2"3.0.3"

     

    If all the tests passed and you were able to load D3.js correctly, you are ready to get started.

    If you think it is useful, you can download it from app store and try:

    https://itunes.apple.com/cn/app/ilearning-d3.js-basic/id649355489?mt=8 

  • 相关阅读:
    php学习记录 易混淆
    自己学习smarty的一些代码 和记录
    Java 死锁
    Java多线程下单例
    Java 线程安全问题
    Java 线程状态
    Java 创建线程
    Java clone() 浅拷贝 深拷贝
    Java 多线程
    Java throw try catch
  • 原文地址:https://www.cnblogs.com/mavlarn/p/3136870.html
Copyright © 2011-2022 走看看