第一个成型的d3案例

目录

最终效果

第一个成型的d3案例

案例源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
      const data = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48],
        svgWidth = 500,
        svgHeight = 300,
        rectWidth = 25,
        rectGap = 5, // 矩形间的间距
        textBottom = 10, // 文字距下方的距离
        // 向body中添加svg节点
        svg = d3
          .select('body')
          .append('svg')
          .attr('width', svgWidth)
          .attr('height', svgHeight);

      // 在本例中,使用比例尺,可以由d3推算传入的值,在svg中应该渲染的高度
      const scale = d3
        // 线性比例尺
        .scaleLinear()
        // 定义域(使用scale时,传入的值在domain范围内,则d3推算输出range范围内的数据)
        .domain([0, d3.max(data)])
        // 值域(最大渲染到svg的高度)
        .range([d3.min(data), svgHeight]);

      const g = svg
        // 找到svg下的所有g标签,对其进行添加/删除等操作,都是对svg下的所有g标签进行操作
        .selectAll('g')
        // 加载多个数据
        .data(data)
        // enter和append一起使用,可以在标签数量少于数据数量时,添加标签,直到标签数量和数据数量一致
        // 下面的操作,都是给追加的
        .enter()
        .append('g');
      // 给每个g标签添加矩形
      g.append('rect')
        .attr('width', rectWidth)
        // d是数据中的每个元素
        .attr('height', (d) => scale(d))
        // i表示数据索引
        .attr('x', (d, i) => i * (rectWidth + rectGap))
        // 怎么让矩形从底部向上开始? 让纵轴方向向下偏移到最大纵轴的位置,但是减去自己的高度
        .attr('y', (d) => svgHeight - scale(d))
        // 矩形填充色
        .style('fill', 'skyblue');
      // 给每个g标签添加文字
      // 给rect节点添加文字,看不到效果
      // NOTE 如果要在rect节点上显示文字,需要将text节点添加为rect的平级节点,并设置其x,y属性值
      g.append('text')
        .attr('font-size', '12px')
        // text-anchor默认值是start,对中文和数字来说是右对齐
        .attr('text-anchor', 'middle')
        // 调整文字在x轴的位置。在矩形位置的基础上,再加上矩形宽度的一半
        .attr('x', (d, i) => i * (rectWidth + rectGap) + rectWidth / 2)
        .attr('y', (d) => svgHeight - textBottom)
        .text((d) => d);
    </script>
  </body>
</html>

知识点总结

怎么给rect节点添加文字?

目前直接给rect中添加text节点是没有效果的。

想要给rect添加文本,目前只能用g标签同时包裹recttext节点,并将text节点的位置,设置到rect节点的上边。结构就像这样第一个成型的d3案例

怎么让矩形的起点看起来在下边?

因为所有矩形开始时的y属性值都是0,所以初始画面是所有的矩形看起来都是自上而下开始的,就像这样,并不是想要的最终结果。第一个成型的d3案例

想要矩形的起点看起来在下边,可以给矩形的y属性值设为svgHeight - 矩形的实际高度,这样就能使矩形起点的的显示效果看起来在下边。

怎么样让文字在矩形的中间显示?

因为rect节点和text节点平级显示,可以给text节点的y属性值设为svgHeight - 一些自己觉得适合的高度,让文本在矩形的起点附近显示;给text节点的x属性值设为矩形的x属性值 + 矩形宽度的一半,但是这样的效果如下,文字有些偏右,不合预期。
第一个成型的d3案例

在上面的基础上可以给text节点添加text-anchor: start | middle | end;属性,指定文本的对齐方式。为了让文本居中,可以使用text-anchor: middle;,即可达成效果。

一个注意点
text-anchor值为start时,经本人测试后,认为其是右对齐。具体使用方式可参考MDN

上一篇:关于d3.js代码的一些理解


下一篇:更省地儿的足浴器,按摩效果也很好,HITH智能自动折叠足浴器D3体验