D3.js 气泡图对齐中心d3 js

我已经创建了一个带有缩放功能的气泡图

var r=500，
h=500，
格式=d3。格式（“，d”），
fill=d3.scale.category20c（）；
var bubble=d3.layout.pack（）.sort（null）.size（[r，h]）；
var vis=d3.选择（“图表”）.追加（“svg”）
.attr（“类”、“气泡”）
.call（d3.behavior.zoom（）.on（“缩放”，重绘））
.append（“g”）.attr（“类”、“组2”）
json（“cantGetRidOfThis”，function（）{
var node=vis.selectAll（“g.node”）
.data（bubble.nodes（flat.filter）（函数（d）{return！d.children；}））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
text（函数（d）{returnd.className+“：“+格式（d.value）；}）；
node.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）
.attr（“类”、“节点圆”）
.style（“填充”、“ff4719”）
.attr（“数据类名”，函数（d）{return d.classname；}）；
node.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“类”、“节点文本”）
.attr（“数据类名称”，函数（d）{return d.classname；}）
.attr（“样式”，函数（d）{return“字体大小：”+d.r/5；}）
.attr（“数据类名称”，函数（d）{return d.classname；}）
.每个（功能（d，i）{
var nm=d.className；
var arr=nm.replace（/[\（\）\\/，-]/g，“”）。replace（/\s+/g，“”）。split（“”），arrlength=（arr.length>7）？8:arr.length；
d3.选择（this）.attr（'y'，“-”+（arrlength/2）+“em”）；
//如果文本超过7个单词，则第8个单词为椭圆
对于（var n=0；n

上面的代码可以很好地处理所需的所有内容，但有一件事我无法弄清楚，那就是在div id=“chart”的中心填充图表。当前图表显示在左侧。

---

如何将图表填充到div的中心

小提琴中没有任何内容，我认为您遗漏了“flat”变量…请尝试进行修改…@saikiran.vsk。感谢您的快速回复。我找到了解决方案很高兴听到，因此您已经解决了您的问题。。。。太好了我在想办法解决这个问题？介意发布你找到的解决方案吗？

   var r = 500,
   h = 500,

  format = d3.format(",d"),
  fill = d3.scale.category20c();

  var bubble = d3.layout.pack().sort(null).size([r,h]);

 var vis = d3.select("#chart").append("svg")

.attr("class", "bubble")
.call(d3.behavior.zoom().on("zoom", redraw))
.append("g").attr("class", "group2")



d3.json("cantGetRidOfThis", function() {
var node = vis.selectAll("g.node")
.data(bubble.nodes(flat).filter(function(d) {return !d.children;}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")";});

node.append("title").text(function(d) {return d.className + ": " + format(d.value);});

node.append("circle")
.attr("r", function(d) {return d.r;})
.attr("class", "nodecircle")
.style("fill", '#ff4719')
.attr("data-classname", function(d) {return d.className;});

node.append("text")
.attr("text-anchor", "middle")
.attr("class", "nodetext")
.attr("data-classname", function(d) {return d.className;})
.attr("style", function(d) {return "font-size:" + d.r/5;})
.attr("data-classname", function(d) {return d.className;})
.each(function(d, i) {
  var nm = d.className;
  var arr = nm.replace(/[\(\)\\/,-]/g, " ").replace(/\s+/g, " ").split(" "),arrlength = (arr.length > 7) ? 8 : arr.length;
  d3.select(this).attr('y',"-" + (arrlength/2) + "em");
  //if text is over 7 words then ellipse the 8th
  for(var n = 0; n < arrlength; n++) {
    var tsp = d3.select(this).append('tspan').attr("x", "0").attr("dy", "1em").attr("data-classname", nm);
    if(n === 7) {
      tsp.text("...");
    } else {
      tsp.text(arr[n]);
    }
  }
});
});

function clickOnCircleFunc(el){
var selection = el.target.__data__.className;
  //bubble select
  $('.nodecircle').each(function (id, v) {
  var $this = $(this),d_nm = $this.attr('data-classname');
  if (d_nm === selection && $this.attr('data-selected') !== 'y') {
  $this.attr('data-selected','y').css('fill', '#3182bd');
}
else {
  $this.attr('data-selected','n').css('fill', '#ff4719');
}
});
}

function redraw() {

 vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");



}