如何在React ChartJS中获取填充圆形图表？

Question

我想介绍一个压缩圆图（气泡图的变体，仅包含半径作为其尺寸）。

React Chartjs

甚至

Chartjs

仅支持气泡图，但不支持圆形图。这是我想要添加的预期图表的示例

我可以使用

react-chartjs

得到类似的东西吗？例如，需要执行如下操作来定期启动气泡图。

const defaultDatasets = [
            {
              label: ["China"],
              backgroundColor: "rgba(255,221,50,0.2)",
              borderColor: "rgba(255,221,50,1)",
              data: [{
                x: 735,
                y: 50,
                r: 15
              }]
            }, {
              label: ["Denmark"],
              backgroundColor: "rgba(60,186,159,0.2)",
              borderColor: "rgba(60,186,159,1)",
              data: [{
                x: 116,
                y: 50,
                r: 10
              }]
            }, {
              label: ["Germany"],
              backgroundColor: "rgba(0,0,0,0.2)",
              borderColor: "#000",
              data: [{
                x: 2116,
                y: 50,
                r: 15
              }]
            }
          ]

由于我的要求是填充圆图，所以我有两个选择。

• 我可以省略

  x

  和

  y

  值。但随后所有气泡都会变得混乱。
• 我可以随机化

  x

  和

  y

  值并隐藏轴。但随机化并不能保证任何气泡重叠，或者可能使一些气泡集中到一个点。

是否有任何技巧或解决方法可以像上图一样以良好的顺序显示气泡？

Answer 1

只是一个普通的 JS、Chart.JS 和 D3 解决方案...

使用 D3layout.pack 算法（该算法似乎已被弃用，因此这只是权宜之计）但是......它调用 D3 打包例程来计算每个点的 x，y 和缩放半径，然后提取该值转换为 ChartJS 气泡图可以使用的数据结构。

var w = document.getElementById("c").offsetWidth,
  h = document.getElementById("c").offsetHeight;

// build random set of circles for the d3 packing
var data = {
  "name": "root",
  "children": []
}
for (var i = 1; i <= 15; i++) {
  data["children"].push({
    "name": i,
    "size": Math.floor((Math.random() * 200) + 1)
  })
}

// use D3 to pack into the canvas size, with a little bit of padding
var nodes = d3.layout.pack()
  .value(function(d) {
    return d.size;
  })
  .size([w, h])
  .padding(4)
  .nodes(data);

// Get rid of root node
nodes.shift();

// take the packed nodes data, and push to format ChartJS expects for bubbles
nodedata = [];
for (i = 0; i < nodes.length; i++) {
  node = nodes[i]
  nodedata.push({
    "x": node.x,
    "y": node.y,
    "r": node.r
  })
}

// create a bubble chart with no labels, border lines etc
var bubbleChart = new Chart(document.getElementById("cc"), {
  type: 'bubble',
  data: {
    datasets: [{
      data: nodedata,
      backgroundColor: "rgba(212,121,212,1)"
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          display: false,
        },
        grid: {
          display: false
        },
        border: {
          display: false
        }
      },
      y: {
        display: false,
        ticks: {
          display: false,
        },
        grid: {
          display: false,
        },
        border: {
          display: false
        }
      }
    },
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
    }
  }
});

#c {
  border: 1px solid black;
  width: 380px;
  height: 280px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div id="c"><canvas id="cc"></canvas></div>

问题：

• 有时我们会得到稍微重叠的圆圈
• 包装经过优化以填充圆形，而不是有效地使用整个矩形
• 无重心提高聚类性
• 如前所述，依赖于较旧的 D3 版本

我怀疑这些问题中的大多数都可以通过更复杂的 D3 力模型应用程序来解决（允许它运行几个刻度，直到圆圈定位，然后传递到图表）

将上述解决方案的D3部分归功于seliopou。