Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dimension label style #339

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Dimension label style #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
954937d
Merge pull request #1 from syntagmatic/master
Git-me-outta-here May 18, 2017
52bf392
brushExtents now fires events only after all new extents have been se…
Git-me-outta-here May 18, 2017
338164f
dimensions have optional titlestyle to style their title labels; fixe…
Git-me-outta-here Sep 21, 2017
2de758c
small horizontal lines for single dimension
Git-me-outta-here Oct 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 37 additions & 9 deletions d3.parcoords.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -662,7 +662,21 @@ function getNullPosition() {
};

function single_path(d, ctx) {
d3.entries(__.dimensions).forEach(function(p, i) { //p isn't really p
var dimensions = d3.entries(__.dimensions);

if (dimensions.length === 1) {
// draw a short horizontal line when we have only a single dimension
dimensions.forEach(function(p, i) { //p isn't really p
if (typeof d[p.key] =='undefined') {
return; // null value
}
ctx.moveTo(position(p.key)-p.value.tickPadding, __.dimensions[p.key].yscale(d[p.key]));
ctx.lineTo(position(p.key)+p.value.tickPadding, __.dimensions[p.key].yscale(d[p.key]));
});
return;
}

dimensions.forEach(function(p, i) { //p isn't really p
if (i == 0) {
ctx.moveTo(position(p.key), typeof d[p.key] =='undefined' ? getNullPosition() : __.dimensions[p.key].yscale(d[p.key]));
} else {
Expand Down Expand Up @@ -741,6 +755,10 @@ function dimensionLabels(d) {
return __.dimensions[d].title ? __.dimensions[d].title : d; // dimension display names
}

function dimensionLabelStyles(d) {
return __.dimensions[d].titlestyle ? __.dimensions[d].titlestyle : ""; // optional dimension display names styles
}

pc.createAxes = function() {
if (g) pc.removeAxes();

Expand Down Expand Up @@ -778,7 +796,8 @@ pc.createAxes = function() {
"y": 0,
"transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
"x": 0,
"class": "label"
"class": "label",
"style": dimensionLabelStyles
})
.text(dimensionLabels)
.on("dblclick", flipAxisAndUpdatePCP)
Expand Down Expand Up @@ -850,7 +869,8 @@ pc.updateAxes = function(animationTime) {
"y": 0,
"transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
"x": 0,
"class": "label"
"class": "label",
"style": dimensionLabelStyles
})
.text(dimensionLabels)
.on("dblclick", flipAxisAndUpdatePCP)
Expand Down Expand Up @@ -1213,9 +1233,13 @@ pc.brushMode = function(mode) {
.transition()
.duration(0)
.call(brush);

//fire some events
brush.event(brushSelections[d]);
}
});

//now all brush extents have been updated: fire some events
d3.keys(brushes).forEach(function(d) {
if (brushes[d] !== undefined || extents[d] === undefined) {
brushes[d].event(brushSelections[d]);
}
});

Expand Down Expand Up @@ -1751,9 +1775,13 @@ pc.brushMode = function(mode) {
.transition()
.duration(0)
.call(brush);

//fire some events
brush.event(brushSelections[d]);
}
});

//now all brush extents have been updated: fire some events
d3.keys(brushes).forEach(function(d) {
if (brushes[d] !== undefined || extents[d] === undefined) {
brushes[d].event(brushSelections[d]);
}
});

Expand Down
19 changes: 10 additions & 9 deletions examples/titles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,25 @@
<script src="../d3.parcoords.js"></script>
<body>
<div id="example" class="parcoords" style="width:500px;height:150px"></div>
<p>Demonstrates overriding dimension titles, except for 2 and 3.</p>
<p>Demonstrates setting dimension titles and styles.</p>
</body>
<script>
var parcoords = d3.parcoords({
dimensionTitles: {
0: "Zero",
1: "One",
4: "Four",
5: "Five"
}
})("#example")
var parcoords = d3.parcoords()("#example")
.data([
[0,-0,0,0,0,3 ],
[1,-1,1,2,1,6 ],
[2,-2,4,4,0.5,2],
[3,-3,9,6,0.33,4],
[4,-4,16,8,0.25,9]
])
.dimensions({
0:{title:'Zero', type:'number', titlestyle:"text-shadow: 0 1px 1px #5f5, 1px 0 1px #5f5, 0 -1px 1px #5f5, -1px 0 1px #5f5, 0 2px 1px #5f5, 2px 0 1px #5f5, 0 -2px 1px #5f5, -2px 0 1px #5f5"},
1:{title:'One', type:'number' },
2:{title:'', type:'number', titlestyle:"text-shadow: 0 1px 1px #f55, 1px 0 1px #f55, 0 -1px 1px #f55, -1px 0 1px #f55, 0 2px 1px #f55, 2px 0 1px #f55, 0 -2px 1px #f55, -2px 0 1px #f55"},
3:{title:'Three', type:'number', titlestyle:'font-weight: bold;' },
4:{title:'Four', type:'number' },
})
.autoscale()
.render()
.createAxes();
</script>
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"url": "https://github.com/syntagmatic/parallel-coordinates.git"
},
"dependencies": {
"d3": "~3.5"
"d3": "~3.5"
},
"devDependencies": {
"http-server": "^0.6.1",
Expand All @@ -30,7 +30,6 @@
"scripts": {
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1",

"pretest": "npm install",
"test": "vows; echo"
},
Expand Down
10 changes: 8 additions & 2 deletions src/axis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ function dimensionLabels(d) {
return __.dimensions[d].title ? __.dimensions[d].title : d; // dimension display names
}

function dimensionLabelStyles(d) {
return __.dimensions[d].titlestyle ? __.dimensions[d].titlestyle : ""; // optional dimension display names styles
}

pc.createAxes = function() {
if (g) pc.removeAxes();

Expand Down Expand Up @@ -73,7 +77,8 @@ pc.createAxes = function() {
"y": 0,
"transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
"x": 0,
"class": "label"
"class": "label",
"style": dimensionLabelStyles
})
.text(dimensionLabels)
.on("dblclick", flipAxisAndUpdatePCP)
Expand Down Expand Up @@ -145,7 +150,8 @@ pc.updateAxes = function(animationTime) {
"y": 0,
"transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
"x": 0,
"class": "label"
"class": "label",
"style": dimensionLabelStyles
})
.text(dimensionLabels)
.on("dblclick", flipAxisAndUpdatePCP)
Expand Down
10 changes: 7 additions & 3 deletions src/brushes/1D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,13 @@
.transition()
.duration(0)
.call(brush);

//fire some events
brush.event(brushSelections[d]);
}
});

//now all brush extents have been updated: fire some events
d3.keys(brushes).forEach(function(d) {
if (brushes[d] !== undefined || extents[d] === undefined) {
brushes[d].event(brushSelections[d]);
}
});

Expand Down
10 changes: 7 additions & 3 deletions src/brushes/1D.multi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,13 @@
.transition()
.duration(0)
.call(brush);

//fire some events
brush.event(brushSelections[d]);
}
});

//now all brush extents have been updated: fire some events
d3.keys(brushes).forEach(function(d) {
if (brushes[d] !== undefined || extents[d] === undefined) {
brushes[d].event(brushSelections[d]);
}
});

Expand Down
16 changes: 15 additions & 1 deletion src/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,21 @@ function getNullPosition() {
};

function single_path(d, ctx) {
d3.entries(__.dimensions).forEach(function(p, i) { //p isn't really p
var dimensions = d3.entries(__.dimensions);

if (dimensions.length === 1) {
// draw a short horizontal line when we have only a single dimension
dimensions.forEach(function(p, i) { //p isn't really p
if (typeof d[p.key] =='undefined') {
return; // null value
}
ctx.moveTo(position(p.key)-p.value.tickPadding, __.dimensions[p.key].yscale(d[p.key]));
ctx.lineTo(position(p.key)+p.value.tickPadding, __.dimensions[p.key].yscale(d[p.key]));
});
return;
}

dimensions.forEach(function(p, i) { //p isn't really p
if (i == 0) {
ctx.moveTo(position(p.key), typeof d[p.key] =='undefined' ? getNullPosition() : __.dimensions[p.key].yscale(d[p.key]));
} else {
Expand Down