Skip to content

Commit

Permalink
Added ability to draw svg images in the horizontal bar chart. Note: D…
Browse files Browse the repository at this point in the history 
…oes not work when the chart is stacked.
  • Loading branch information
@cwelch5
cwelch5 committed Dec 4, 2014
1 parent e828a7b commit d830fa5
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 24 deletions.
50 changes: 40 additions & 10 deletions nv.d3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8534,6 +8534,7 @@ nv.models.multiBarHorizontal = function() {
, stacked = false
, showValues = false
, showBarLabels = false
, showBarsAsImages = false //using images makes stacking obsolete, thus making this true, will cause stacked to be false and for controls to be disabled
, valuePadding = 60
, valueFormat = d3.format(',.2f')
, delay = 1200
Expand Down Expand Up @@ -8677,9 +8678,19 @@ nv.models.multiBarHorizontal = function() {
return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
});

barsEnter.append('rect')
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
if (showBarsAsImages) {
barsEnter.append('svg:image')
.attr("xlink:href", function(d) { return d.svg })
.attr("width", function(d) { return d.width })
.attr("height", function(d) { return d.height })
.attr("transform", function(d,i) {
return "translate(" + (Math.max(y(getY(d,i)) - y(0),1) - d.width/2) + "," + ((x.rangeBand()/data.length/2) - (d.height/2)) + ")";
});
} else {
barsEnter.append('rect')
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
}

bars
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
Expand Down Expand Up @@ -8741,7 +8752,13 @@ nv.models.multiBarHorizontal = function() {
.text(function(d,i) { return valueFormat(getY(d,i)) })
bars.transition()
.select('text')
.attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
.attr('x', function(d,i) {
if (showBarsAsImages) {
return getY(d,i) < 0 ? -4 - d.width/2 : y(getY(d,i)) - y(0) + 4 + d.width / 2;
} else {
return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4;
}
})
} else {
bars.selectAll('text').text('');
}
Expand Down Expand Up @@ -8792,13 +8809,21 @@ nv.models.multiBarHorizontal = function() {
+
x(getX(d,i)) )
+ ')'
})
.select('rect')
.attr('height', x.rangeBand() / data.length )
.attr('width', function(d,i) {
return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
});

if (showBarsAsImages) {
bars.transition().select('image')
.attr('transform', function(d,i) {
return 'translate(' + (Math.max(y(getY(d,i)) - y(0),1) - d.width/2) + ',' + ((x.rangeBand()/data.length/2) - (d.height/2)) + ')';
});
} else {
bars.transition().select('rect')
.attr('height', x.rangeBand() / data.length )
.attr('width', function(d,i) {
return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
});
}


//store old scales for use in transitions on update
x0 = x.copy();
Expand Down Expand Up @@ -8941,6 +8966,11 @@ nv.models.multiBarHorizontal = function() {
return chart;
};

chart.showBarsAsImages = function(_) {
if (!arguments.length) return showBarsAsImages;
showBarsAsImages = _;
return chart;
};

chart.valueFormat= function(_) {
if (!arguments.length) return valueFormat;
Expand Down Expand Up @@ -9318,7 +9348,7 @@ nv.models.multiBarHorizontalChart = function() {
chart.yAxis = yAxis;

d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY',
'clipEdge', 'id', 'delay', 'showValues','showBarLabels', 'valueFormat', 'stacked', 'barColor');
'clipEdge', 'id', 'delay', 'showValues', 'showBarLabels', 'showBarsAsImages', 'valueFormat', 'stacked', 'barColor');

chart.options = nv.utils.optionsFunc.bind(chart);

Expand Down
8 changes: 4 additions & 4 deletions nv.d3.min.js
View file

Large diffs are not rendered by default.

48 changes: 39 additions & 9 deletions src/models/multiBarHorizontal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ nv.models.multiBarHorizontal = function() {
, stacked = false
, showValues = false
, showBarLabels = false
, showBarsAsImages = false //using images makes stacking obsolete, thus making this true, will cause stacked to be false and for controls to be disabled
, valuePadding = 60
, valueFormat = d3.format(',.2f')
, delay = 1200
Expand Down Expand Up @@ -163,9 +164,19 @@ nv.models.multiBarHorizontal = function() {
return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
});

barsEnter.append('rect')
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
if (showBarsAsImages) {
barsEnter.append('svg:image')
.attr("xlink:href", function(d) { return d.svg })
.attr("width", function(d) { return d.width })
.attr("height", function(d) { return d.height })
.attr("transform", function(d,i) {
return "translate(" + (Math.max(y(getY(d,i)) - y(0),1) - d.width/2) + "," + ((x.rangeBand()/data.length/2) - (d.height/2)) + ")";
});
} else {
barsEnter.append('rect')
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
}

bars
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
Expand Down Expand Up @@ -227,7 +238,13 @@ nv.models.multiBarHorizontal = function() {
.text(function(d,i) { return valueFormat(getY(d,i)) })
bars.transition()
.select('text')
.attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
.attr('x', function(d,i) {
if (showBarsAsImages) {
return getY(d,i) < 0 ? -4 - d.width/2 : y(getY(d,i)) - y(0) + 4 + d.width / 2;
} else {
return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4;
}
})
} else {
bars.selectAll('text').text('');
}
Expand Down Expand Up @@ -278,13 +295,21 @@ nv.models.multiBarHorizontal = function() {
+
x(getX(d,i)) )
+ ')'
})
.select('rect')
.attr('height', x.rangeBand() / data.length )
.attr('width', function(d,i) {
return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
});

if (showBarsAsImages) {
bars.transition().select('image')
.attr('transform', function(d,i) {
return 'translate(' + (Math.max(y(getY(d,i)) - y(0),1) - d.width/2) + ',' + ((x.rangeBand()/data.length/2) - (d.height/2)) + ')';
});
} else {
bars.transition().select('rect')
.attr('height', x.rangeBand() / data.length )
.attr('width', function(d,i) {
return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
});
}


//store old scales for use in transitions on update
x0 = x.copy();
Expand Down Expand Up @@ -427,6 +452,11 @@ nv.models.multiBarHorizontal = function() {
return chart;
};

chart.showBarsAsImages = function(_) {
if (!arguments.length) return showBarsAsImages;
showBarsAsImages = _;
return chart;
};

chart.valueFormat= function(_) {
if (!arguments.length) return valueFormat;
Expand Down
2 changes: 1 addition & 1 deletion src/models/multiBarHorizontalChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ nv.models.multiBarHorizontalChart = function() {
chart.yAxis = yAxis;

d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY',
'clipEdge', 'id', 'delay', 'showValues','showBarLabels', 'valueFormat', 'stacked', 'barColor');
'clipEdge', 'id', 'delay', 'showValues', 'showBarLabels', 'showBarsAsImages', 'valueFormat', 'stacked', 'barColor');

chart.options = nv.utils.optionsFunc.bind(chart);

Expand Down

0 comments on commit d830fa5

Please sign in to comment.