D3的第一次尝试--bubble

d3版本5.9.2

d3的bubble图，主要用的是d3.pack()，是一种数据的处理，经过计算使全部的bubble都不重叠。

d3.pack()会返回每条数据的x,y轴的坐标以及半径r，这样你就能够根据返回的数据布局。

在这个过程当中遇到的坑：

一、因为版本的问题，好多函数一直报错，3版本和4版本以上有不少不一样

二、我想要的效果是个长方形，可他一直渲染成正方形

     这个缘由是，这个包布局，是有一个根节点，会把全部的子节点都包在一块儿，因此说他的计算范围依然是一个园，因此不可能渲染成长方形，可是能够本身手动计算

三、在设置样式的时候也和普通的css不一样

     线： stroke

     背景色： fill

效果：

html:

<section id="graph" style="width: 100%; height: 150px"></section>

style:

.add-green-color {
    stroke: #50E3C2;
    fill: #50E3C2;
    fill-opacity: 0.25;
  }

js:

const data = [{
      name: '感受不错',
      value: 185,
    }, {
      name: '玩的开心',
      value: 88,
    }, {
      name: '景色美',
      value: 35,
    }, {
      name: '态度好',
      value: 63,
    }, {
      name: '感受不错',
      value: 185,
    }, {
      name: '玩的开心',
      value: 88,
    }, {
      name: '景色美',
      value: 35,
    }, {
      name: '态度好',
      value: 63,
    }];
    data.forEach((t, index) => {
      t.id = index;
    });
    const elementGraph = document.getElementById('graph');
    const boxWidth = elementGraph === null ? 0 : elementGraph.clientWidth;
    const packs = (wordData) => d3.pack()
    .size([boxWidth, 150])
    .padding(3)
    (d3.hierarchy({children: wordData})
    .sum((d) => d.value));
    const root = packs(data);

    const svg = d3.select('#graph').append('svg')
    .style('width', '100%')
    .style('height', '100%')
    .attr('font-family', 'sans-serif')
    .attr('font-weight', 'bold')
    .attr('text-anchor', 'middle');

    const leaf = svg.selectAll('g')
    .data(root.leaves())
    .join('g')
    .attr('transform', (d) => `translate(${(d.x - 70) * 2},${d.y})`);

    leaf.append('circle')
    .attr('r', (d) => d.r)
    .attr('class', 'add-green-color');

    leaf.append('clipPath')
    .attr('id', (d) => 'cover-' + d.data.id)
    .append('circle')
    .attr('fill', '#ffffff')
    .attr('r', (d) => d.r);


    leaf.append('text')
    .attr('clip-path', (d) => 'url(#cover-' + d.data.id + ')')
    .attr('font-size', (d) => {
      const num = Math.ceil(d.data.value / 15);
      return num > 18 ? 18 : num < 8 ? 8 : num;
    })
    .selectAll('tspan')
    .data((d) => d.data.name.split(/(?=[A-Z][^A-Z])/g))
    .join('tspan')
    .attr('x', 0)
    .attr('y', (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
    .attr('fill', '#ffffff')
    .text((d) => d);
    return svg.node();

遮罩(clipPath)参考：http://www.javashuo.com/article/p-tfkqgivm-dw.html