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 

  • 相关阅读:
    windows批处理命令笔记
    linux 配置互访免密登录 sshkeygen
    jenkins 中 pipeline 管理部署服务到k8s 插件总结
    求教:Net环境导致WPF程序无法启动
    读《C程序设计语言》笔记11
    求教:.Net Framework 3.5 SP1安装失败
    设计模式
    flash基本操作二库面板和元件创建
    AUTOCAD自学教程一
    flash基本操作
  • 原文地址:https://www.cnblogs.com/mavlarn/p/3136870.html
Copyright © 2011-2022 走看看