parcoords fonts

Author: monfera

src/traces/parcoords/attributes.js

@@ -12,10 +12,12 @@ var colorAttributes = require('../../components/colorscale/color_attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
 var colorscales = require('../../components/colorscale/scales');
 var axesAttrs = require('../../plots/cartesian/layout_attributes');
+var fontAttrs = require('../../plots/font_attributes');
 
 var extendDeep = require('../../lib/extend').extendDeep;
 var extendFlat = require('../../lib/extend').extendFlat;
 
+
 module.exports = {
 
     domain: {
@@ -47,6 +49,10 @@ module.exports = {
         }
     },
 
+    labelfont: extendFlat({}, fontAttrs, {description: 'Sets the font for the `dimension` labels.'}),
+    tickfont: extendFlat({}, fontAttrs, {description: 'Sets the font for the `dimension` tick values.'}),
+    rangefont: extendFlat({}, fontAttrs, {description: 'Sets the font for the `dimension` range values.'}),
+
     dimensions: {
         _isLinkedToArray: 'dimension',
         label: {

src/traces/parcoords/defaults.js

@@ -81,6 +81,10 @@ function dimensionsDefaults(traceIn, traceOut) {
     return dimensionsOut;
 }
 
+function coerceFont(fontAttr, coerce, defaultFont) {
+    var fontSpec = Lib.coerceFont(coerce, fontAttr);
+    Lib.coerceFont(coerce, fontAttr, Lib.extendFlat({}, defaultFont, fontSpec));
+}
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -97,4 +101,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     if(!Array.isArray(dimensions) || !dimensions.length) {
         traceOut.visible = false;
     }
+
+    coerceFont('labelfont', coerce, layout.font);
+    coerceFont('tickfont', coerce, layout.font);
+    coerceFont('rangefont', coerce, layout.font);
 };

src/traces/parcoords/parcoords.js

@@ -12,6 +12,7 @@ var lineLayerMaker = require('./lines');
 var c = require('./constants');
 var Lib = require('../../lib');
 var d3 = require('d3');
+var Drawing = require('../../components/drawing');
 
 
 function keyFun(d) {return d.key;}
@@ -122,7 +123,10 @@ function model(layout, d, i) {
         line = trace.line,
         domain = trace.domain,
         dimensions = trace.dimensions,
-        width = layout.width;
+        width = layout.width,
+        labelFont = trace.labelfont,
+        tickFont = trace.tickfont,
+        rangeFont = trace.rangefont;
 
     var lines = Lib.extendDeep({}, line, {
         color: lineColor.map(domainToUnitScale({values: lineColor, range: [line.cmin, line.cmax]})),
@@ -144,6 +148,9 @@ function model(layout, d, i) {
         tickDistance: c.tickDistance,
         unitToColor: unitToColorScale(cscale),
         lines: lines,
+        labelFont: labelFont,
+        tickFont: tickFont,
+        rangeFont: rangeFont,
         translateX: domain.x[0] * width,
         translateY: layout.height - domain.y[1] * layout.height,
         pad: pad,
@@ -227,8 +234,6 @@ function styleExtentTexts(selection) {
     selection
         .classed('axisExtentText', true)
         .attr('text-anchor', 'middle')
-        .style('font-weight', 100)
-        .style('font-size', '10px')
         .style('cursor', 'default')
         .style('user-select', 'none');
 }
@@ -545,6 +550,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
             var scale = d.domainScale;
             var sdom = scale.domain();
             var texts = d.ticktext;
+            Drawing.font(axis, d.model.tickFont)
             d3.select(this)
                 .call(d3.svg.axis()
                     .orient('left')
@@ -567,8 +573,6 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
 
     axis
         .selectAll('text')
-        .style('font-weight', 100)
-        .style('font-size', '10px')
         .style('fill', 'black')
         .style('fill-opacity', 1)
         .style('stroke', 'none')
@@ -590,15 +594,14 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
         .append('text')
         .classed('axisTitle', true)
         .attr('text-anchor', 'middle')
-        .style('font-family', 'sans-serif')
-        .style('font-size', '10px')
         .style('cursor', 'ew-resize')
         .style('user-select', 'none')
         .style('pointer-events', 'auto');
 
     axisTitle
         .attr('transform', 'translate(0,' + -c.axisTitleOffset + ')')
-        .text(function(d) {return d.label;});
+        .text(function(d) {return d.label;})
+        .each(function(d) {Drawing.font(axisTitle, d.model.labelFont);});
 
     var axisExtent = axisOverlays.selectAll('.axisExtent')
         .data(repeat, keyFun);
@@ -631,7 +634,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
         .call(styleExtentTexts);
 
     axisExtentTopText
-        .text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);});
+        .text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);})
+        .each(function(d) {Drawing.font(axisExtentTopText, d.model.rangeFont);});
 
     var axisExtentBottom = axisExtent.selectAll('.axisExtentBottom')
         .data(repeat, keyFun);
@@ -653,7 +657,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
         .call(styleExtentTexts);
 
     axisExtentBottomText
-        .text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);});
+        .text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);})
+        .each(function(d) {Drawing.font(axisExtentBottomText, d.model.rangeFont);});
 
     var axisBrush = axisOverlays.selectAll('.axisBrush')
         .data(repeat, keyFun);