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 

  • 相关阅读:
    计算几何——交点、面积的计算
    计算几何——认识基本object:点、线、面 。
    图的拓扑排序——卡恩算法
    Manacher
    如何不改造 HBase 就能应对复杂查询场景
    如何做沟通
    大数据磁盘阵列技术
    Android系统架构开篇
    Apache Kylin 原理介绍与新架构分享(Kylin On Parquet)
    遭遇突然提问慌了?掌握关键2点完美应对zz
  • 原文地址:https://www.cnblogs.com/mavlarn/p/3136870.html
Copyright © 2011-2022 走看看