2021SC@SDUSC 软件工程应用与实践（11）——视图控制

2021SC@SDUSC

一、引言

本篇博客将对项目中视图的相关功能模块进行分析。

二、代码分析

1.平移与缩放

按住鼠标在空白位置移动可以移动视图的相对位置，鼠标滚轮完成视图的放大和缩小。
事件直接在svg视图部分注册，通过标签的translate和scale属性实现平移和缩放：

var svg = d3.select("#svg1")
  .call(d3.zoom().on('zoom', function(event) {
    // console.log(event)
    var scale = event.transform.k,
        translate = [event.transform.x, event.transform.y]
	//视图矫正
    if (this.svgTranslate) {
        translate[0] += this.svgTranslate[0]
        translate[1] += this.svgTranslate[1]
    }

    // if (this.svgScale) {
    //     scale *= this.svgScale
    // }

    svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')');
  }))
  .append('g')
  .attr('width', '100%')
  .attr('height', '100%')

给画布绑定zoom事件（缩放、平移）。

2.文字显示

文字基于节点居中显示，并实现自动换行排版，根据文本字数分1-3行进行展示。
函数实现（通过attr属性进行批量操作）：

function textBreaking(d3text, text) {
  const len = text.length
  if (len <= 3) {
    d3text.append('tspan')
      .attr('x', 0)
      .attr('y', 2)
      .text(text)
  } else {
    const topText = text.substring(0, 3)
    const midText = text.substring(3, 7)
    let botText = text.substring(7, len)
    let topY = -16
    let midY = 0
    let botY = 16
    if (len <= 7) {
      topY += 10
      midY += 10
    } else if (len > 10){
      botText = text.substring(7, 9) + '...'
    }

    d3text.text('')
    d3text.append('tspan')
      .attr('x', 0)
      .attr('y', topY)
      .text(function () {
        return topText
      })
    d3text.append('tspan')
      .attr('x', 0)
      .attr('y', midY)
      .text(function () {
        return midText
      })
    d3text.append('tspan')
      .attr('x', 0)
      .attr('y', botY)
      .text(function () {
        return botText
      })
  }
}

实现了文本分隔（根据字数在当前选择器中分隔三行，超过10字省略）。
param {d3text} 文本对应的DOM对象；
param {text} 节点名称的文本值；
return {void}。

3.拖拽

通过按住鼠标调整选中节点的位置及相对布局。v6版本事件移除了全局事件对象d3.event，通过返回的函数参数来处理。

drag(simulation) {
  function dragsubject(event) {
    return simulation.find(event.x, event.y);
  }

  function dragstarted(event) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    event.subject.fx = event.subject.x;
    event.subject.fy = event.subject.y;
  }
  
  function dragged(event) {
    event.subject.fx = event.x;
    event.subject.fy = event.y;
  }
  
  function dragended(event) {
    if (!event.active) simulation.alphaTarget(0);
  }
  
  return d3.drag()
    .subject(dragsubject)
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended)
}

定义在vue的methods中。
注释掉event.subject.fx = null; event.subject.fy = null;代码，可以使拖动结束后固定节点。