Question

上创建了一个带缩放功能的气泡图

   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 + ")");



}

上面的代码工作正常，所有需要的东西，但有一件事是无法弄清楚的是在div id =“chart”的中心填充图表。当前图表显示在左边。
图表如何填充在div的中心

气泡图对齐中心d3 js

0 个答案: