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