首页 > 其他分享> > 第一个成型的d3案例

第一个成型的d3案例

2021-11-25 07:32:16 作者：互联网

最终效果
案例源码
知识点总结

最终效果

案例源码

<!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标签同时包裹rect和text节点，并将text节点的位置，设置到rect节点的上边。结构就像这样

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

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

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

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

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

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

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

标签：attr,text,节点,案例,添加,成型,矩形,d3,rect
来源： https://www.cnblogs.com/zoexu/p/15596524.html