前端工程工业互联网（基于＜svg/＞，基于＜canvas/＞，基于3d引擎ht.graph3d.Graph3dView(dataModel)）

H5新特性

1.语义化标签：header、footer、section、nav、aside、article
2.增强型表单：input 的多个 type
3.新增表单元素：datalist、keygen、output
4.新增表单属性：placehoder、required、min 和 max
5.音频视频：audio、video
6.canvas
7.地理定位
8.拖拽
9.本地存储：localStorage - 没有时间限制的数据存储；
10.sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
11.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
12.WebSocket：单个 TCP 连接上进行全双工通讯的协议

HT

用web网页做一个轨道火车可视化

1.HT的坐标系

用信息技术和来连接能力为传统工业 赋能

            dataModel = new ht.DataModel();//通过add方法加入进DataModel
            var g3d = new ht.graph3d.Graph3dView(dataModel);//3d引擎组件把数据三维环境场景
 
            var view = g3d.getView();
            //g3d.getView()是用来获得html的根div的，通过document.body.appendChild来添加到页面中
            view.className = 'main';
            document.body.appendChild(view);
            window.addEventListener('resize', function (e) {
                g3d.invalidate();  //重绘
            }, false);
            g3d.setEye([0, 300, 1000]);//定义观察点
            g3d.enableToolTip();  //g3d.enableToolTip()是开启提示工具。
            g3d.getToolTip = function(e){
                var data = this.getDataAt(e);
                if(data){
                    return '<pre>' + JSON.stringify(data.getStyleMap(), null, 4) + '</pre>';//获取图元内部样式映射信息
                }
                return null;
            };


        function createNode(shape, p3, s3,r3){
            var node = new ht.Node();
            node.setStyle('shape3d', shape);
            node.p3(p3);
            node.s3(s3);
            if(r3){
                node.r3(r3);
            }
            dataModel.add(node);
            return node;
        }



            var train = createNode('rect', [300, 200, 0],[600,100,100],[0,0,0]).s({   //s就是getStyle和setStyle的缩写，用来定义样式。
                'shape3d.image': 'train',    //这里用shape3d.image来定义整体贴图
                'shape3d.top.color':'#000',  //shape3d.top.color就是顶面的颜色
                'shape3d.bottom.color':'rgba(52,111,130,0.95)',  //就是底面的颜色
            });


            var brwheel = createNode('cylinder',[500,125,40],[50,10,50],[Math.PI/2,0,0]).s({
                'shape3d.top.image': 'wheels',
                'shape3d.bottom.image': 'wheels',
                'shape3d.from.color':'#000'
            });
            var bbar = createNode('cylinder',[500,125,5],[10,70,10],[Math.PI/2,0,0]).s({
                'shape3d.color': '#000'
            });




            createNode('rect', [0, 100, -30],[1200,10,10],[-Math.PI,0,0]).s({
                'shape3d.color':'#000',
            });
            createNode('rect', [0, 100, 40],[1200,10,10],[-Math.PI,0,0]).s({
                'shape3d.color':'#000',
            });
            for(var i=0;i<25;i++){
                var x = -600 + i*50;
                createNode('rect', [x, 100, 5],[10,10,70],[-Math.PI,0,0]).s({
                    'shape3d.color':'#767676',
                });
            }

//驱动火车从左到右运动
            train.setAnimation({
                move: {
                    from: 300, //移动初始位置
                    to: -300, //移动终止位置
                    easing: "Linear", //移动方式
                    duration: 5000,//持续时间
                    onUpdate: function (value) {
                        this.setPosition(value, this.getPosition().y);
                    }
                },
                start:["move"]
            });
            //动画使轮子旋转
            [blwheel,brwheel,bbar].forEach(function(obj){
                obj.setAnimation({
                   move:{
                       from: 500,
                       to: -100,
                       easing:"Linear",
                       duration:5000,
                       onUpdate:function(value){
                           this.setPosition(value, this.getPosition().y);
                       }
                   },
                   rotate:{
                       from:0,
                       to:Math.PI*2,
                       easing:"Linear",
                       duration:1000,
                       repeat:true,
                       onUpdate:function(value){//onUpdate每一帧的回调
                           this.r3([this.getRotationX(),this.getRotationY(),value]);
                       }
                   },
                   start:["move","rotate"]
 
               });
            });
            //动画启动
           dataModel.enableAnimation(50);

Echart

图表"柱状图"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

d3.js

observe收录

chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);
  
  svg.append("g")
      .attr("fill", color)
    .selectAll("rect")
    .data(bins)
    .join("rect")
      .attr("x", d => x(d.x0) + 1)
      .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1))
      .attr("y", d => y(d.length))
      .attr("height", d => y(0) - y(d.length));

  svg.append("g")
      .call(xAxis);
  
  svg.append("g")
      .call(yAxis);
  
  return svg.node();
}
//定义新的数据
data = Object.assign(d3.csvParse(await FileAttachment("unemployment-x.csv").text(), ({rate}) => +rate), {x: "Unemployment (%)", y: "Counties"})

bins = d3.bin().thresholds(40)(data)

x = d3.scaleLinear()
    .domain([bins[0].x0, bins[bins.length - 1].x1])
    .range([margin.left, width - margin.right])

x = d3.scaleLinear()
    .domain([bins[0].x0, bins[bins.length - 1].x1])
    .range([margin.left, width - margin.right])

y = d3.scaleLinear()
    .domain([0, d3.max(bins, d => d.length)]).nice()
    .range([height - margin.bottom, margin.top])

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0))
    .call(g => g.append("text")
        .attr("x", width - margin.right)
        .attr("y", -4)
        .attr("fill", "currentColor")
        .attr("font-weight", "bold")
        .attr("text-anchor", "end")
        .text(data.x))

yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(height / 40))
    .call(g => g.select(".domain").remove())
    .call(g => g.select(".tick:last-of-type text").clone()
        .attr("x", 4)
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text(data.y))        
   color = "steelblue"
   height = 500
   margin = ({top: 20, right: 20, bottom: 30, left: 40})
   d3 = require("d3@^6.2.0")