Javascript 甜甜圈馅饼混合d3第4版

我有一个老的油炸圈饼混合饼图/气泡图组合在d3v3上工作

//甜甜圈气泡图v3

var$this=$'body'； var w=300， h=300； 变量半径=数学最小值，h/2； var svg=d3。选择$this[0] .appendsvg .宽度，w .高度，h .附录 svg.appendg 类，切片； svg.appendg .attr类，占位符； var pie=d3.layout.pie 索特努尔先生 .价值函数{ 返回d值； }; var arc=d3.svg.arc .外半径*0.85 .内半径半径*0.83； var arc2=d3.svg.arc .外部半径-10 .内半径0； var outerArc=d3.svg.arc .内半径半径*0.9 .外半径*0.9； svg.attransform，translate+w/2+，+h/2+； 函数着色{ var colores_g=[f7b363、448875、c12f39、2b2d39、f8dd2f]； 返回颜色[n%颜色长度]； } 风险值数据=[{

---

组：许多内容已从v3更改为v4，如d3.pack而不是d3.layout.pack，以及必须导入ease模块并引用d3.easeSin而不是“sine”。一旦处理完所有这些小差异，代码就会正常工作：

以下是更改的相关部分：

function setBubbleChart(width, index, data) {

  var diameter = width / 2; //take half/width

  var bubs = doughnutbubble.select(".place" + index).append("g")
    .attr("class", "bubs");

  bubs.attr("transform", "translate(" + -diameter / 2 + "," + -diameter / 2 + ")");

  var data = bubbledata(data);
  var bubble = d3.pack(data)
    .size([diameter, diameter])
    .padding(3);

  var nodes = d3.hierarchy(data).sum(d => d.value);

  var bubbles = bubs.selectAll('circle')
    .data(bubble(nodes).descendants());
  bubbles.enter()
    .filter(d => !d.children)
    .insert("circle")
    .attr('transform', function(d) {
      return 'translate(' + d.x + ',' + d.y + ')';
    })
    .attr('r', d => d.r)
    .style("fill", function(d) {
      return colores_google(d.data.groupid);
    });

  bubbles = bubbles.transition()
    .transition()
    .duration(250)
    .attr('transform', function(d) {
      return 'translate(' + d.x + ',' + d.y + ')';
    })
    .attr('r', d => d.r)
    .ease(d3.easeSin);
}

---

这复制了它过去的样子--它是否需要包含easin链接？以及您如何更改或控制气泡的大小d3.packdata.size[直径，直径]这是否限制了最大大小？您的版本不使用d3.forceSimulation或collide？是的，如果您想轻松使用，您需要包括该模块，就像我的小提琴一样。我只是按照您的要求修改了您的v3版本以在v4中工作，所以我使用了具有实际数据的pack。为什么要使用pack而不强制模拟或碰撞？如气泡图h此外，如果有新数据出现，您将如何适应重新绘制图表？您必须从用户体验的角度消除气泡，然后重置dognut图表并重新绘制气泡。