1
0
Fork 0

GraphViewer: Impoved layout of multiline labels

This commit is contained in:
Michael Hackstein 2013-06-03 15:12:04 +02:00
parent 7b1a519f81
commit 19003f160f
4 changed files with 12 additions and 12 deletions

View File

@ -28,7 +28,7 @@
}
svg.graphViewer text {
font: 12px Arial;
font: 16px Arial;
pointer-events: none;
}

View File

@ -227,8 +227,8 @@ function NodeShaper(parent, flags, idfunc) {
};
break;
case NodeShaper.shapes.RECT:
width = shape.width || 120;
height = shape.height || 24;
width = shape.width || 90;
height = shape.height || 36;
if (_.isFunction(width)) {
translateX = function(d) {
return -(width(d) / 2);
@ -269,12 +269,12 @@ function NodeShaper(parent, flags, idfunc) {
var chunks = splitLabel(label(d));
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "0")
.attr("dy", "-4")
.text(chunks[0]);
if (chunks.length === 2) {
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "20")
.attr("dy", "16")
.text(chunks[1]);
}
});
@ -289,12 +289,12 @@ function NodeShaper(parent, flags, idfunc) {
var chunks = splitLabel(d._data[label]);
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "0")
.attr("dy", "-4")
.text(chunks[0]);
if (chunks.length === 2) {
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "20")
.attr("dy", "16")
.text(chunks[1]);
}
});

View File

@ -128,8 +128,8 @@
expect($("svg rect").length).toEqual(1);
expect($("svg .node rect")[0]).toBeDefined();
expect($("svg .node rect").length).toEqual(1);
expect($("svg #1 rect").attr("width")).toEqual("120");
expect($("svg #1 rect").attr("height")).toEqual("24");
expect($("svg #1 rect").attr("width")).toEqual("90");
expect($("svg #1 rect").attr("height")).toEqual("36");
});
describe('testing for colours', function() {
@ -798,11 +798,11 @@
expect($(spans.get(0)).text()).toEqual("Label with");
expect($(spans.get(0)).attr("x")).toEqual("0");
expect($(spans.get(0)).attr("dy")).toEqual("0");
expect($(spans.get(0)).attr("dy")).toEqual("-4");
expect($(spans.get(1)).text()).toEqual("many words");
expect($(spans.get(1)).attr("x")).toEqual("0");
expect($(spans.get(1)).attr("dy")).toEqual("20");
expect($(spans.get(1)).attr("dy")).toEqual("16");
});
it('should automatically cut labels with more then 20 characters', function() {

View File

@ -1,5 +1,5 @@
svg#graphViewer text {
font: 11px Arial;
font: 16px Arial;
pointer-events: none;
stroke: #000;
}