nvd3.js - Bigger points in a line chart
Date : March 29 2020, 07:55 AM
Hope that helps After looking through the output generated in the simple line chart, you could add this CSS, to make all points visible: .nvd3 .nv-groups .nv-point {
stroke-opacity: 0.5 !important;
stroke-width: 10px;
}
|
nvd3 - can't showXAxis(false) if xAxis is visible
Date : March 29 2020, 07:55 AM
around this issue setXAxis just tells the chart function whether or not to draw the axis when it draws the chart, it doesn't do anything to the existing axis. You'd be better off just selecting the axis directly and changing its visibility style. Given the class names that NVD3 uses for it's axes, to hide the x-axis you would use: d3.select("g.nv-axis.nv-x").style("visibility", "hidden")
|
Increase point size of all points for rCharts NVD3
Tag : r , By : CHeMoTaCTiC
Date : March 29 2020, 07:55 AM
Any of those help Try this using this very helpful answer d3.v3 scatterplot with all circles the same radiuslibrary(rCharts)
p2 <- nPlot(mpg ~ wt, group = 'cyl', data = mtcars, type = 'scatterChart')
p2$xAxis(axisLabel = 'Weight')
#p2$chart(size = 100) #Also tried 1000, '1000px', etc.
p2$chart(sizeRange = c(1000,1000))
p2
|
Appending text to points in angular-nvd3
Date : March 29 2020, 07:55 AM
will help you No nvd3 has nothing to show labels as per your requirement. But this can be achieved mixing a little of d3 like this: $scope.clear= function(){
d3.selectAll(".label").remove();//will clear all the labels
}
$scope.showLabel= function(){
$scope.clear();
//for each path make label
d3.selectAll(".nv-group path")[0].forEach(function(d){
var tf = d3.select(d).attr("transform")
t = d3.transform(tf).translate;
t[0] = t[0] +10;//moving the translate x by 5 pixel.
console.log(d3.select(d).data()[0])//data associated with the point
d3.select(d.parentNode)
.append("text")
.attr("class", "label")
.text("data: "+ d3.select(d).data()[0][1])//putting data
.attr("transform", "translate("+t[0]+","+t[1]+")");/setting the changed translate for label
});
}
|
nvd3 multibarchart last bar is hidden not visible
Tag : d3.js , By : Lucyberad
Date : March 29 2020, 07:55 AM
this will help Based on this stackoverflow answer I was trying to copy essential parts to get proper scale for timeline. I use multibarcharts for multible graphs, from few records to hundreds with X-axis having data from 1930 to today. , Checkout the code below which was derived from your posted code: nv.addGraph(function() {
var data = [{
"values": [
{
x: new Date("1999-12-01"),
y: 42.27
},
{
x: new Date("2000-12-01"),
y: 41.73
},
{
x: new Date("2001-12-01"),
y: 41.34
},
{
x: new Date("2002-12-01"),
y: 41.84
},
{
x: new Date("2003-12-01"),
y: 43.93
},
{
x: new Date("2004-12-01"),
y: 42.18
},
{
x: new Date("2005-12-01"),
y: 42.31
},
{
x: new Date("2006-12-01"),
y: 43.14
},
{
x: new Date("2007-12-01"),
y: 43.24
},
{
x: new Date("2008-12-01"),
y: 39.30
},
{
x: new Date("2009-12-01"),
y: 43.80
},
{
x: new Date("2010-12-01"),
y: 44.10
},
{
x: new Date("2011-12-01"),
y: 54.10
},
{
x: new Date("2012-12-01"),
y: 62.10
},
{
x: new Date("2013-12-01"),
y: 56.70
},
{
x: new Date("2014-12-01"),
y: 45
},
{
x: new Date("2015-12-01"),
y: 55.60
},
{
x: new Date("2026-12-01"),
y: 54.40
},
{
x: new Date("2027-12-01"),
y: 57
}
],
"bar": true,
"key": "Payout Ratio"
}];
var fDate = data[0].values[0].x,
lDate = new Date(data[0].values[data[0].values.length - 1].x);
lDate.setFullYear(lDate.getFullYear() + 1);
var chart = nv.models.multiBarChart()
.showControls(false)
.reduceXTicks(false)
.rotateLabels(-45),
container = d3.select('#payout_ratio_chart svg'),
availableWidth,
numTicks = (lDate.getFullYear() - fDate.getFullYear()) + 1,
xScale = d3.time.scale();
function updateAvailableWidth() {
availableWidth = (chart.width() || parseInt(container.style('width')) || 960) - chart.margin().left - chart.margin().right;
}
updateAvailableWidth();
xScale.rangeBands = xScale.range;
xScale.rangeBand = function() {
return (1 - chart.groupSpacing()) * availableWidth / numTicks;
};
chart.multibar.xScale(xScale);
chart.xDomain([fDate, lDate]);
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%b %Y')(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',f'));
container.datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(function() {
updateAvailableWidth();
chart.update();
});
return chart;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css" rel="stylesheet"/>
<div id="payout_ratio_chart">
<svg style="width:100%;height:400px" />
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
|
Boards Message :
Related QUESTIONS :