2

d3.js に基づく dagre-d3 を使用しています。グラフがレンダリングされた後、すべてのコンテンツに合わせてズームし、中央に配置する必要があります。

ご覧のとおり、中央に配置できますが、身長が 400 であるため、すべてのコンテンツに収まらないようです。

他のダグレの状況に使用できるソリューションが必要であることに注意してください。たとえば、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)');
4

3 に答える 3

2

適切なデフォルト スケールは、ズーム コンテナーの高さ (または幅) に対する 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);

フィドルを更新しました。

于 2016-04-17T22:18:51.350 に答える
1

d3 v6

const $svg = d3.select(svg)
const $container = $svg.append("g")

// Setup d3-zoom

const zoom = d3.zoom().on("zoom", (event) => {
    $container.attr("transform", event.transform)
})
$svg.call(zoom)

// Render graph

const dagre_render = new dagre.render({})
const graph = new dagre.graphlib.Graph(...)
dagre_render($container, graph)

// Zoom to fit

const { width, height } = $container.node().getBBox()
if (width && height) {
    const scale = Math.min(svg.clientWidth / width, svg.clientHeight / height) * 0.95
    zoom.scaleTo($svg, scale)
    zoom.translateTo($svg, width / 2, height / 2)
}
于 2021-02-12T07:49:47.110 に答える