Skip to content

Commit

Permalink
Merge pull request #70 from magjac/fix-width-height
Browse files Browse the repository at this point in the history 
When setting only SVG width, don't set height and vice versa
  • Loading branch information
Magnus Jacobsson authored Jun 15, 2018
2 parents 7565dfa + 4f4a2a9 commit ec9248f
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 48 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,11 +239,11 @@ The size of the graph is determined in three optional steps:

<a name="graphviz_width" href="#graphviz_width">#</a> <i>graphviz</i>.<b>width</b>(<i>width</i>) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/width.js "Source")

The SVG width attribute is set to *width* pixels. If the *height* option is not set specifically, the SVG height is automatically set to a value that preserves the current aspect ratio of the SVG.
The SVG width attribute is set to *width* pixels.

<a name="graphviz_height" href="#graphviz_height">#</a> <i>graphviz</i>.<b>height</b>(<i>height</i>) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/height.js "Source")

The SVG height attribute is set to *height* pixels. If the *width* option is not set specifically, the SVG width is automatically set to a value that preserves the current aspect ratio of the SVG.
The SVG height attribute is set to *height* pixels.

<a name="graphviz_fit" href="#graphviz_fit">#</a> <i>graphviz</i>.<b>fit</b>(<i>fit</i>) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/height.js "Source")

Expand Down
17 changes: 10 additions & 7 deletions src/render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,16 +112,19 @@ function _render(callback) {
var width = options.width;
var height = options.height;
if (width == null) {
width = data.attributes.width.replace('pt', '') * height / data.attributes.height.replace('pt', '');
width = data.attributes.width.replace('pt', '') * 4 / 3;
} else {
element
.attr("width", width);
data.attributes.width = width;
}
if (height == null) {
height = data.attributes.height.replace('pt', '') * width / data.attributes.width.replace('pt', '');
height = data.attributes.height.replace('pt', '') * 4 / 3;
} else {
element
.attr("height", height);
data.attributes.height = height;
}
element
.attr("width", width)
.attr("height", height);
data.attributes.width = width;
data.attributes.height = height;
if (!options.fit) {
element
.attr("viewBox", `0 0 ${width * 3 / 4 / options.scale} ${height * 3 / 4 / options.scale}`);
Expand Down
79 changes: 40 additions & 39 deletions test/width-height-scale-fit-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,15 @@ var tape = require("tape"),
d3 = require("d3-selection"),
d3_graphviz = require("../");

function round12(x) {
return Math.round(x * 1000000000000) / 1000000000000;
}

tape("graphviz().width() sets svg width.", function(test) {
var window = global.window = jsdom('<div id="graph"></div>');
var document = global.document = window.document;
var graphviz = d3_graphviz.graphviz("#graph")
.tweenShapes(false)
.zoom(false);

var originalWidth = 62;
var originalHeight = 116;
var originalAspectRatio = originalWidth / originalHeight;
var originalWidthPt = 62;
var originalHeightPt = 116;

var originalViewBox = '0.00 0.00 62.00 116.00'

Expand All @@ -25,14 +20,14 @@ tape("graphviz().width() sets svg width.", function(test) {
graphviz
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidth, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeight, "SVG height is the original height");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), originalViewBox, "SVG viewBox is the original viewBox");

// Set width/height with fit, without scale

var width = originalWidth * 2;
var height = originalHeight * 2;
var width = originalWidthPt * 2;
var height = originalHeightPt * 2;

graphviz
.width(width)
Expand All @@ -41,7 +36,7 @@ tape("graphviz().width() sets svg width.", function(test) {
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width"), width, "SVG width is set with .width()");
test.equal(round12(+d3.select('svg').attr("height")), round12(width / originalAspectRatio), "SVG height is scaled with aspect ratio");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), originalViewBox, "SVG viewBox is the original viewBox when fit is true and scale is not specified");

graphviz
Expand All @@ -50,7 +45,7 @@ tape("graphviz().width() sets svg width.", function(test) {
.fit(true)
.renderDot('digraph {a -> b;}');

test.equal(round12(+d3.select('svg').attr("width")), round12(height * originalAspectRatio), "SVG width is scaled with aspect ratio");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height"), height, "SVG height is set with .height()");
test.equal(d3.select('svg').attr("viewBox"), originalViewBox, "SVG viewBox is the original viewBox when fit is true and scale is not specified");

Expand All @@ -68,6 +63,8 @@ tape("graphviz().width() sets svg width.", function(test) {
// Set width/height without fit and scale

viewBox = `0 0 ${width * 3 / 4} ${height * 3 / 4}`;
originalWidthViewBox = `0 0 ${originalWidthPt} ${height * 3 / 4}`;
originalHeightViewBox = `0 0 ${width * 3 / 4} ${originalHeightPt}`;

graphviz
.width(width)
Expand All @@ -76,18 +73,19 @@ tape("graphviz().width() sets svg width.", function(test) {
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width"), width, "SVG width is set with .width()");
test.equal(round12(+d3.select('svg').attr("height")), round12(width / originalAspectRatio), "SVG height is scaled with aspect ratio");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale is not specified");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), originalHeightViewBox, "SVG viewBox is set to svg width and original height when width is set and height is not set and fit is false and scale is not specified");


graphviz
.width(null)
.height(height)
.fit(false)
.renderDot('digraph {a -> b;}');

test.equal(round12(+d3.select('svg').attr("width")), round12(height * originalAspectRatio), "SVG width is scaled with aspect ratio");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height"), height, "SVG height is set with .height()");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale is not specified");
test.equal(d3.select('svg').attr("viewBox"), originalWidthViewBox, "SVG viewBox is set to svg width and original height when width is not set and height is set and fit is false and scale is not specified");

graphviz
.width(width)
Expand All @@ -98,15 +96,15 @@ tape("graphviz().width() sets svg width.", function(test) {

test.equal(+d3.select('svg').attr("width"), width, "SVG width is set with .width()");
test.equal(+d3.select('svg').attr("height"), height, "SVG height is set with .height()");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale is not specified");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when both width and height is set and fit is false and scale is not specified");

// Set width/height, with fit and scale

var width = originalWidth * 2;
var height = originalHeight * 2;
var width = originalWidthPt * 2;
var height = originalHeightPt * 2;
var scale = 0.5;

viewBox = `0 0 ${originalWidth / scale} ${originalHeight / scale}`;
viewBox = `0 0 ${originalWidthPt / scale} ${originalHeightPt / scale}`;

graphviz
.width(width)
Expand All @@ -116,8 +114,8 @@ tape("graphviz().width() sets svg width.", function(test) {
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width"), width, "SVG width is set with .width()");
test.equal(round12(+d3.select('svg').attr("height")), round12(width / originalAspectRatio), "SVG height is scaled with aspect ratio");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale <> 1");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is true and scale <> 1");

graphviz
.width(null)
Expand All @@ -126,7 +124,7 @@ tape("graphviz().width() sets svg width.", function(test) {
.scale(scale)
.renderDot('digraph {a -> b;}');

test.equal(round12(+d3.select('svg').attr("width")), round12(height * originalAspectRatio), "SVG width is scaled with aspect ratio");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height"), height, "SVG height is set with .height()");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is the original viewBox when fit is true and scale <> 1");

Expand All @@ -144,7 +142,10 @@ tape("graphviz().width() sets svg width.", function(test) {

// Set width/height, without fit, with scale

viewBox = `0 0 ${width * 3 / 4 / scale} ${height * 3 / 4 / scale}`;
scaledViewBox = `0 0 ${width * 3 / 4 / scale} ${height * 3 / 4 / scale}`;
scaledOriginalWidthViewBox = `0 0 ${originalWidthPt / scale} ${height * 3 / 4 / scale}`;
scaledOriginalHeightViewBox = `0 0 ${width * 3 / 4 / scale} ${originalHeightPt / scale}`;
scaledOriginalViewBox = `0 0 ${originalWidthPt / scale} ${originalHeightPt / scale}`;

graphviz
.width(width)
Expand All @@ -154,8 +155,8 @@ tape("graphviz().width() sets svg width.", function(test) {
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width"), width, "SVG width is set with .width()");
test.equal(round12(+d3.select('svg').attr("height")), round12(width / originalAspectRatio), "SVG height is scaled with aspect ratio");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale <> 1");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), scaledOriginalHeightViewBox, "SVG viewBox has scaled svg width and scaled original height when width is set and height is not set and fit is false and scale <> 1");

graphviz
.width(null)
Expand All @@ -164,9 +165,9 @@ tape("graphviz().width() sets svg width.", function(test) {
.scale(scale)
.renderDot('digraph {a -> b;}');

test.equal(round12(+d3.select('svg').attr("width")), round12(height * originalAspectRatio), "SVG width is scaled with aspect ratio");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height"), height, "SVG height is set with .height()");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale <> 1");
test.equal(d3.select('svg').attr("viewBox"), scaledOriginalWidthViewBox, "SVG viewBox has scaled original width and scaled svg height when width is not set and height is set and fit is false and scale <> 1");

graphviz
.width(width)
Expand All @@ -178,7 +179,7 @@ tape("graphviz().width() sets svg width.", function(test) {

test.equal(+d3.select('svg').attr("width"), width, "SVG width is set with .width()");
test.equal(+d3.select('svg').attr("height"), height, "SVG height is set with .height()");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is set to svg size when fit is false and scale <> 1");
test.equal(d3.select('svg').attr("viewBox"), scaledViewBox, "SVG viewBox is the scaled svg size when both width and height is set and fit is false and scale <> 1");

// Don't set width/height, but with fit (nop), without scale
graphviz
Expand All @@ -189,13 +190,13 @@ tape("graphviz().width() sets svg width.", function(test) {
.renderDot('digraph {a -> b;}');


test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidth, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeight, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), originalViewBox, "SVG viewBox is the original viewBox when svg size is unchanged, fit is true and scale is 1");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), originalViewBox, "SVG viewBox is the scaled original viewBox when svg size is unchanged, fit is true and scale is 1");

// Don't set width/height, but with fit (nop) and scale

viewBox = `0 0 ${originalWidth / scale} ${originalHeight / scale}`;
viewBox = `0 0 ${originalWidthPt / scale} ${originalHeightPt / scale}`;

graphviz
.width(null)
Expand All @@ -204,13 +205,13 @@ tape("graphviz().width() sets svg width.", function(test) {
.scale(scale)
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidth, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeight, "SVG height is the original height");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is scaled when svg size is unchanged and fit is true and scale is not 1");

// Don't set width/height or fit, but with and scale

viewBox = `0 0 ${originalWidth / scale} ${originalHeight / scale}`;
viewBox = `0 0 ${originalWidthPt / scale} ${originalHeightPt / scale}`;

graphviz
.width(null)
Expand All @@ -219,8 +220,8 @@ tape("graphviz().width() sets svg width.", function(test) {
.scale(scale)
.renderDot('digraph {a -> b;}');

test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidth, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeight, "SVG height is the original height");
test.equal(+d3.select('svg').attr("width").replace('pt', ''), originalWidthPt, "SVG width is the original width");
test.equal(+d3.select('svg').attr("height").replace('pt', ''), originalHeightPt, "SVG height is the original height");
test.equal(d3.select('svg').attr("viewBox"), viewBox, "SVG viewBox is scaled when svg size is unchanged and fit is false and scale is not 1");

test.end();
Expand Down

0 comments on commit ec9248f

Please sign in to comment.