Scale and Center D3-Graphviz Graph

Asked By: Anonymous

What is the best way to scale and center a graph using d3-graphviz? I was hopeful that I could use scale(0.5) but this leaves the resulting graph uncentered.

I could probably go in with an .attributer() and manually adjust the <svg> and <g> elements to get what I’m looking for, but I figured there was probably a better way?

_x000D_

_x000D_

d3.select("#graph")
  .graphviz()
    .width(300)
    .height(300)
    .fit(true)
    .scale(.5)
    .renderDot('digraph {a -> b}');

_x000D_

//d3js.org/d3.v5.min.js
https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js
https://unpkg.com/[email protected]/build/d3-graphviz.js
  
<div id="graph" style="width: 300px; height: 300px; border: 1px solid black"></div>

_x000D_

_x000D_

x000D


Solution

Answered By: Anonymous

There’s no simple built-in way, but you can achieve almost anything with the attributer like so:

_x000D_

_x000D_

const px2pt = 3 / 4;

function attributer(datum, index, nodes) {
    var selection = d3.select(this);
    if (datum.tag == "svg") {
        var width = datum.attributes.width;
        var height = datum.attributes.height;
        w = datum.attributes.viewBox.split(" ")[2];
        h = datum.attributes.viewBox.split(" ")[3];
        var x = (width * px2pt - w / 2) / 2;
        var y = (height * px2pt - h / 2) / 2;
        selection
            .attr("width", width)
            .attr("height", height)
            .attr("viewBox", -x + " " + -y + " " + (width * px2pt) + " " + (height * px2pt));
        datum.attributes.width = width;
        datum.attributes.height = height;
        datum.attributes.viewBox = -x + " " + -y + " " + (width * px2pt) + " " + (height * px2pt);
    }
}

d3.select("#graph").graphviz()
    .width(300)
    .height(300)
    .fit(true)
    .scale(.5)
    .attributer(attributer)
    .renderDot('digraph  {a -> b}');

_x000D_

//d3js.org/d3.v5.min.js
https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js
https://unpkg.com/[email protected]/build/d3-graphviz.js
  
<div id="graph" style="width: 300px; height: 300px; border: 1px solid black"></div>

_x000D_

_x000D_

x000D

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno