SEECBC/FrontEnd/components/playground/nn/Simulation.vue

<template>
  <div>
    <v-row>
      <v-col cols="4">
        <div class="svgBox text-center" />
        <div class="svgBox1 text-center" />
      </v-col>
      <v-col cols="4">
       
        <editor />
      </v-col>
      <v-col cols="4">
        <div class="svgBox2 text-center" />
      </v-col>
    </v-row>
  </div>
</template>

<script>
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-unused-vars */
/* eslint-disable no-console */
/* eslint-disable camelcase */

import * as d3 from 'd3'
import Editor from './Editor'
export default {
  name: 'Simulation',
  components: { Editor },
  data() {
    return {
      dataSquareLength: 40,
      calculationSquareLength: 40,
      wAndBSquareLength: 70,
      svgHeight: 1200,
      svgWidth: 70,
      data1: [1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1],
      dataSetW: [],
      dataSetB: []
    }
  },

  mounted() {
    
  },

  methods: {
    // 绘制训练数据
    initTrainingData() {
      const svgTrain = d3
        .select('.svgBox')
        .append('svg')
        .attr('id', 'svgTrain')
        .attr('width', 210)
        .attr('height', 180)
        .attr('x', 0)
        .attr('y', 0) // 添加svg画布
      const g = svgTrain.append('g') // 添加g元素来组合对象
      let x = 0
      let y = 0
      const squareLength = this.dataSquareLength

      for (let i = 0; i < 12; i++) {
        g.append('rect')
          .attr('width', squareLength)
          .attr('height', squareLength)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        g.append('text')
          .text(this.data1[i])
          .attr('fill', 'black')
          .attr('x', x + squareLength / 2)
          .attr('y', y + squareLength / 2)
          .attr('text-anchor', 'middle')
          .style('font-size', '20px')
          .attr('dy', 8)
        x += squareLength
        if (x > 2 * squareLength) {
          x = 0
          y += squareLength
        }
      }
    },

    // 绘制需计算的加权输入、输出等数据
    initCalculation() {
      const svgCalculation = d3
        .select('.svgBox1')
        .append('svg')
        .attr('id', 'svgCalculation')
        .attr('width', 210)
        .attr('height', 500)
        .attr('x', 0)
        .attr('y', 0) // 添加svg画布
      const g = svgCalculation.append('g') // 添加g元素来组合对象
      let x = 0
      let y = 0
      const squareLength = this.calculationSquareLength
      const data1 = ['隐藏层z', '隐藏层a', '输出层a', '输出层z']

      // 隐藏层绘制
      for (let i = 0; i < 2; i++) {
        const rect = g
          .append('rect')
          .attr('width', squareLength)
          .attr('height', squareLength * 3)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text = g
          .append('text')
          .text(data1[i])
          .attr('fill', 'black')
          .attr('x', x + squareLength / 2)
          .attr('y', y + (squareLength * 3) / 2)
          .attr('text-anchor', 'middle')
          .style('font-size', '10px')
          .attr('dy', 8)
        let y1 = y
        for (let j = 0; j < 3; j++) {
          const rect = g
            .append('rect')
            .attr('width', squareLength)
            .attr('height', squareLength)
            .attr('x', x + squareLength)
            .attr('y', y1)
            .attr('fill', '#FFFFFF')
            .attr('stroke', '#000000')
            .attr('stroke-width', 3)
          const text = g
            .append('text')
            .text(j + 1)
            .attr('fill', 'black')
            .attr('x', x + squareLength + squareLength / 2)
            .attr('y', y1 + squareLength / 2)
            .attr('text-anchor', 'middle')
            .style('font-size', '10px')
            .attr('dy', 8)
          y1 += squareLength
        }
        y += squareLength * 3
      }

      // 输出层绘制
      for (let i = 2; i < 4; i++) {
        const rect = g
          .append('rect')
          .attr('width', squareLength)
          .attr('height', squareLength * 2)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text = g
          .append('text')
          .text(data1[i])
          .attr('fill', 'black')
          .attr('x', x + squareLength / 2)
          .attr('y', y + squareLength)
          .attr('text-anchor', 'middle')
          .style('font-size', '10px')
          .attr('dy', 8)
        let y1 = y
        for (let j = 0; j < 2; j++) {
          const rect = g
            .append('rect')
            .attr('width', squareLength)
            .attr('height', squareLength)
            .attr('x', x + squareLength)
            .attr('y', y1)
            .attr('fill', '#FFFFFF')
            .attr('stroke', '#000000')
            .attr('stroke-width', 3)
          const text = g
            .append('text')
            .text(j + 1)
            .attr('fill', 'black')
            .attr('x', x + squareLength + squareLength / 2)
            .attr('y', y1 + squareLength / 2)
            .attr('text-anchor', 'middle')
            .style('font-size', '10px')
            .attr('dy', 8)
          y1 += squareLength
        }
        y += squareLength * 2
      }

      const g1 = svgCalculation.append('g').attr('id', 'gVariables') // 添加g元素来组合对象
      x += squareLength * 2
      y = 0
      for (let i = 0; i < 10; i++) {
        const rect = g1
          .append('rect')
          .attr('width', squareLength)
          .attr('height', squareLength)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text = g1
          .append('text')
          .text('')
          .attr('fill', 'black')
          .attr('x', x + squareLength / 2)
          .attr('y', y + squareLength / 2)
          .attr('text-anchor', 'middle')
          .style('font-size', '10px')
          .attr('dy', 8)
        y += squareLength
      }
    },

    // 绘制权重和偏置
    initWAndB() {
      const svgTitle = d3
        .select('.svgBox2')
        .append('svg')
        .attr('id', 'svgTitle')
        .attr('width', this.svgWidth)
        .attr('height', this.svgHeight)
        .attr('x', 0)
        .attr('y', 0)
      const svgw = d3
        .select('.svgBox2')
        .append('svg')
        .attr('id', 'svgw')
        .attr('width', 210)
        .attr('height', this.svgHeight) // 添加svg画布
      const svgb = d3
        .select('.svgBox2')
        .append('svg')
        .attr('id', 'svgb')
        .attr('width', this.svgWidth)
        .attr('height', this.svgHeight)
        .attr('x', 280)
        .attr('y', 0)
      const g = svgw.append('g') // 添加g元素来组合对象
      let x = 0
      let y = 70
      const squareLength = this.wAndBSquareLength

      // 绘制权重
      const rect = g
        .append('rect')
        .attr('width', 210)
        .attr('height', 70)
        .attr('x', 0)
        .attr('y', 0)
        .attr('fill', '#FFFFFF')
        .attr('stroke', '#000000')
        .attr('stroke-width', 3)
      const text = g
        .append('text')
        .text('w')
        .attr('fill', 'black')
        .attr('x', 105)
        .attr('y', 35)
        .attr('text-anchor', 'middle')
        .style('font-size', '20px')
        .attr('dy', 8)
      for (let i = 0; i < 42; i++) {
        const rect = g
          .append('rect')
          .attr('width', 70)
          .attr('height', 70)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text = g
          .append('text')
          .text('')
          .attr('fill', 'black')
          .attr('x', x + 35)
          .attr('y', y + 35)
          .attr('text-anchor', 'middle')
          .style('font-size', '20px')
          .attr('dy', 8)
        x += 70
        if (x > 140) {
          x = 0
          y += 70
        }
      }

      // 绘制偏置
      const g1 = svgb.append('g') // 添加g元素来组合对象
      const rect1 = g1
        .append('rect')
        .attr('width', 70)
        .attr('height', 70)
        .attr('x', 0)
        .attr('y', 0)
        .attr('fill', '#FFFFFF')
        .attr('stroke', '#000000')
        .attr('stroke-width', 3)
      const text1 = g1
        .append('text')
        .text('b')
        .attr('fill', 'black')
        .attr('x', 35)
        .attr('y', 35)
        .attr('text-anchor', 'middle')
        .style('font-size', '20px')
        .attr('dy', 8)
      x = 0
      y = 70
      for (let i = 0; i < 14; i++) {
        const rect = g1
          .append('rect')
          .attr('width', 70)
          .attr('height', 70)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text = g1
          .append('text')
          .text('')
          .attr('fill', 'black')
          .attr('x', x + 35)
          .attr('y', y + 35)
          .attr('text-anchor', 'middle')
          .style('font-size', '20px')
          .attr('dy', 8)
        y += 70
      }

      const g2 = svgTitle.append('g')
      x = 0
      y = 70
      for (let i = 0; i < 3; i++) {
        const rect1 = g2
          .append('rect')
          .attr('width', 70)
          .attr('height', 280)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text1 = g2
          .append('text')
          .text('隐藏层单元' + (i + 1))
          .attr('fill', 'black')
          .attr('x', x + 35)
          .attr('y', y + 140)
          .attr('text-anchor', 'middle')
          .style('font-size', '10px')
          .attr('dy', 8)
        y += 280
      }
      for (let i = 0; i < 2; i++) {
        const rect1 = g2
          .append('rect')
          .attr('width', 70)
          .attr('height', 70)
          .attr('x', x)
          .attr('y', y)
          .attr('fill', '#FFFFFF')
          .attr('stroke', '#000000')
          .attr('stroke-width', 3)
        const text1 = g2
          .append('text')
          .text('输出层单元' + (i + 1))
          .attr('fill', 'black')
          .attr('x', x + 35)
          .attr('y', y + 35)
          .attr('text-anchor', 'middle')
          .style('font-size', '10px')
          .attr('dy', 8)
        y += 70
      }
    },

    // 设置权重和偏置初始值
    setWAndB() {
      const svgw = d3.select('#svgw')
      const svgb = d3.select('#svgb')
      const dataSetW = []
      const dataSetB = []
      for (let i = 0; i < 56; i++) {
        const a = this.getNumberInNormalDistribution(0, 1)
        console.log(a)
        dataSetW.push(a)
        this.dataSetW.push(a)
      }
      for (let i = 0; i < 5; i++) {
        const a = this.getNumberInNormalDistribution(0, 1)
        console.log(a)
        dataSetB.push(a)
        this.dataSetB.push(a)
      }

      svgw.selectAll('text').text(function (d, i) {
        if (i === 0) {
          return 'w'
        }
        return dataSetW[i]
      })
      dataSetB.reverse()
      svgb.selectAll('text').text(function (d, i) {
        if (i === 0) {
          return 'b'
        } else if (i !== 1 && i !== 5 && i !== 9 && i !== 13 && i !== 14) {
          return ''
        }
        return dataSetB.pop()
      })
    },

    getNumberInNormalDistribution(mean, stdDev) {
      return (mean + this.uniform2NormalDistribution() * stdDev).toFixed(3)
    },

    uniform2NormalDistribution() {
      let sum = 0.0
      for (let i = 0; i < 12; i++) {
        sum = sum + Math.random()
      }
      return sum - 6.0
    },

    calculateVariables() {
      const g = d3.select('#gVariables')
      console.log(this.dataSetB)

      let z1 = 0
      let z2 = 0
      let z3 = 0
      let a1 = 0
      let a2 = 0
      let a3 = 0 // 隐藏层变量
      let z3_1 = 0
      let z3_2 = 0
      let a3_1 = 0
      let a3_2 = 0 // 输出层变量

      for (let i = 0; i < 12; i++) {
        z1 = z1 + Number(this.dataSetW[i]) * Number(this.data1[i])
      }
      z1 = (z1 + Number(this.dataSetB[0])).toFixed(3)
      a1 = this.calculateA(z1)

      for (let i = 0; i < 12; i++) {
        z2 = z2 + Number(this.dataSetW[i + 12]) * Number(this.data1[i])
      }
      z2 = (z2 + Number(this.dataSetB[1])).toFixed(3)
      a2 = this.calculateA(z2)

      for (let i = 0; i < 12; i++) {
        z3 = z3 + Number(this.dataSetW[i + 24]) * Number(this.data1[i])
      }
      z3 = (z3 + Number(this.dataSetB[2])).toFixed(3)
      a3 = this.calculateA(z3)

      z3_1 = (
        a1 * Number(this.dataSetW[36]) +
        a2 * Number(this.dataSetW[37]) +
        a3 * Number(this.dataSetW[38]) +
        Number(this.dataSetB[3])
      ).toFixed(3)
      z3_2 = (
        a1 * Number(this.dataSetW[39]) +
        a2 * Number(this.dataSetW[40]) +
        a3 * Number(this.dataSetW[41]) +
        Number(this.dataSetB[4])
      ).toFixed(3)
      a3_1 = this.calculateA(z3_1)
      a3_2 = this.calculateA(z3_2)

      const data = [z1, z2, z3, a1, a2, a3, z3_1, z3_2, a3_1, a3_2]
      g.selectAll('text').text(function (d, i) {
        return data[i]
      })
    },

    calculateA(z) {
      return (1 / (1 + Math.exp(-z))).toFixed(3)
    }
  }
}
</script>

<style scoped></style>