想要绘制的图形

dwsj.png

引入插件

<script src="js/d3.min.js"></script>
<script src="js/duval.js"></script>
<script src="js/cube.js"></script>
<script src="js/Three/three.min.js"></script>
<script src="js/Three/renderers/CanvasRenderer.js"></script>
<script src="js/Three/renderers/Projector.js"></script>
<script src="js/Three/libs/stats.min.js"></script>
<script src="js/Three/geometries/TextGeometry.js"></script>
<script src="js/Three/utils/FontUtils.js"></script>
<script src="js/Three/fonts/helvetiker_regular.typeface.js"></script>

在html代码body标签中添加div，用于放置绘制出来的图形

<!-- 立方体绘制 -->
<div id="cube" style="width:500px;min-height:100px;margin: 0 auto;"></div>
<!-- 大卫三角绘制 -->
<div id="duval" style="width:500px;min-height:200px;margin: 0 auto;"></div>

最后在js中绘制图形

var Gas = {
    c2h2: 1.1,
    c2h4: 2.2,
    ch4: 3.3,
    c2h6: 4.4,
    h2: 5.5
};

var w = document.getElementById("duval").offsetWidth;
var h = document.getElementById("duval").offsetHeight;
var width = w;
var height = w;

var xlenght = width / 1 - 20;
var pointT1 = createPointObject(xlenght / 2, 0);
var higthY = retainDecimal(Math.sqrt(xlenght * xlenght - (xlenght / 2) * (xlenght / 2)));
var pointT2 = createPointObject(xlenght, higthY);
var pointT3 = createPointObject(0, higthY);
var svg = d3.select("#duval").append("svg").attr("height", height).attr("width", width);

var poly = [{
     "x": pointT1.xValue,
     "y": pointT1.yValue
    }, {
     "x": pointT2.xValue,
     "y": pointT2.yValue
    }, {
     "x": pointT3.xValue,
     "y": pointT3.yValue
    }];

var drawT1 = svg.append("path")
    .attr("d", lineFunc(poly) + "Z")
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .attr("fill", "#EE00EE");

// drawPD(svg, higthY, pointT1, pointT2); // 顶部小三角
// drawT2(svg, higthY, pointT1, pointT2); // 小三角下面长条
// drawT3(svg, higthY, pointT1, pointT2); // 右边最下方梯形
drawDT(svg, higthY, pointT1, pointT2); // 右边梯形里面的大块
drawD1(svg, higthY, pointT1, pointT2); // 左侧大梯形
drawD2(svg, higthY, pointT1, pointT2); // 中间大块
leftDegree(svg, higthY, pointT2); // 左侧刻度
bottomDegree(svg, higthY, pointT2); // 下边刻度
rightDegree(svg, higthY, pointT2); // 右边刻度
// appendBottomLegendText(legend, width, height);


var cubeWidth = document.getElementById("cube").offsetWidth;
var cubeHeight = document.getElementById("cube").offsetWidth;
initCube(cubeWidth, cubeHeight, Gas); // 立方体
注：在vue中使用需要注意dom元素是否生成

如果dom元素未生成，可能会导致由于获取不到div宽高而报错：

​ TypeError: cannot read properties of null (reading 'offsetMidth ")

可以使用netTick回调函数包裹

nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

下载文件

最后修改：2023 年 06 月 13 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏