javascript - dagre-d3 js 缩放适合所有内容

Question

我正在使用基于 d3.js 的 dagre-d3。呈现我的图形后，我希望它缩放以适合所有内容并且它必须居中。

如您所见，我可以很好地将它居中，但我似乎无法容纳所有内容，因为我的高度是 400。

请注意，我想要一个应该适用于其他 dagre 情况的解决方案，例如仅缩放到 0.5 可能适合这种情况，但这不是我想要的。

JSFIDDLE: https://jsfiddle.net/bababalcksheep/xa9rofm5/8/

代码:

'use strict';
//
// setup Zoom from example http://bl.ocks.org/mgold/f61420a6f02adb618a70
// 
var width = 960,
  height = 400,
  center = [width / 2, height / 2];
//
var svg = d3.select('svg'),
  inner = svg.select('g');
//

var zoom = d3.behavior.zoom()
  .translate([0, 0])
  .scale(1)
  .size([900, 400])
  .scaleExtent([1, 8])
  .on('zoom', zoomed);
//
svg
  .call(zoom) // delete this line to disable free zooming
  .call(zoom.event);

function zoomed() {
  inner.attr('transform', 'translate(' + zoom.translate() + ')scale(' + zoom.scale() + ')');
}

function interpolateZoom(translate, scale) {
  var self = this;
  return d3.transition().duration(350).tween('zoom', function () {
    var iTranslate = d3.interpolate(zoom.translate(), translate),
      iScale = d3.interpolate(zoom.scale(), scale);
    return function (t) {
      zoom
        .scale(iScale(t))
        .translate(iTranslate(t));
      zoomed();
    };
  });
}

function zoomClick() {
  var clicked = d3.event.target,
    direction = 1,
    factor = 0.2,
    target_zoom = 1,
    center = [width / 2, height / 2],
    extent = zoom.scaleExtent(),
    translate = zoom.translate(),
    translate0 = [],
    l = [],
    view = {
      x: translate[0],
      y: translate[1],
      k: zoom.scale()
    };

  d3.event.preventDefault();
  direction = (this.id === 'zoom_in') ? 1 : -1;
  target_zoom = zoom.scale() * (1 + factor * direction);

  if (target_zoom < extent[0] || target_zoom > extent[1]) {
    return false;
  }

  translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
  view.k = target_zoom;
  l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

  view.x += center[0] - l[0];
  view.y += center[1] - l[1];

  interpolateZoom([view.x, view.y], view.k);
}

d3.selectAll('button').on('click', zoomClick);
//
//
//
//  tcp-state-diagram EXAMPLE
//
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// States and transitions from RFC 793
var states = ['CLOSED', 'LISTEN', 'SYN RCVD', 'SYN SENT',
  'ESTAB', 'FINWAIT-1', 'CLOSE WAIT', 'FINWAIT-2',
  'CLOSING', 'LAST-ACK', 'TIME WAIT'
];

// Automatically label each of the nodes
states.forEach(function (state) {
  g.setNode(state, {
    label: state
  });
});

// Set up the edges
g.setEdge('CLOSED', 'LISTEN', {
  label: 'open'
});
g.setEdge('LISTEN', 'SYN RCVD', {
  label: 'rcv SYN'
});
g.setEdge('LISTEN', 'SYN SENT', {
  label: 'send'
});
g.setEdge('LISTEN', 'CLOSED', {
  label: 'close'
});
g.setEdge('SYN RCVD', 'FINWAIT-1', {
  label: 'close'
});
g.setEdge('SYN RCVD', 'ESTAB', {
  label: 'rcv ACK of SYN'
});
g.setEdge('SYN SENT', 'SYN RCVD', {
  label: 'rcv SYN'
});
g.setEdge('SYN SENT', 'ESTAB', {
  label: 'rcv SYN, ACK'
});
g.setEdge('SYN SENT', 'CLOSED', {
  label: 'close'
});
g.setEdge('ESTAB', 'FINWAIT-1', {
  label: 'close'
});
g.setEdge('ESTAB', 'CLOSE WAIT', {
  label: 'rcv FIN'
});
g.setEdge('FINWAIT-1', 'FINWAIT-2', {
  label: 'rcv ACK of FIN'
});
g.setEdge('FINWAIT-1', 'CLOSING', {
  label: 'rcv FIN'
});
g.setEdge('CLOSE WAIT', 'LAST-ACK', {
  label: 'close'
});
g.setEdge('FINWAIT-2', 'TIME WAIT', {
  label: 'rcv FIN'
});
g.setEdge('CLOSING', 'TIME WAIT', {
  label: 'rcv ACK of FIN'
});
g.setEdge('LAST-ACK', 'CLOSED', {
  label: 'rcv ACK of FIN'
});
g.setEdge('TIME WAIT', 'CLOSED', {
  label: 'timeout=2MSL'
});

// Set some general styles
g.nodes().forEach(function (v) {
  var node = g.node(v);
  node.rx = node.ry = 5;
});

// Add some custom colors based on state
g.node('CLOSED').style = 'fill: #f77';
g.node('ESTAB').style = 'fill: #7f7';

// Create the renderer
var render = new dagreD3.render();

// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 0.75;
var _height = svg.attr('height') - g.graph().height;
var _width = svg.attr('width') - g.graph().width;
console.log(height / _height);

zoom.translate([(svg.attr('width') - g.graph().width * initialScale) / 2, 10]).scale(1).event(svg);

//svg.transition().duration(750).call(zoom.translate([0, 0]).scale(1).event);
//svg.transition().duration(500).attr('transform', 'scale(0.75) translate(0,0)');

Answer 1

适当的默认比例是 svg 高度(或宽度)与缩放容器高度(或宽度)的较小比率。简化一点:

var padding = 20,
  bBox = inner.node().getBBox(),
  hRatio = height / (bBox.height + padding),
  wRatio = width / (bBox.width + padding);

zoom.translate([(width - bBox.width * initialScale) / 2, padding / 2])
  .scale(hRatio < wRatio ? hRatio : wRatio)
  .event(svg);

已更新 fiddle .