Fix overlap on multiple stacked barchart - d3.js
The fiddle below shows 2 stacked bar charts on the multichart, what styling can be applied to position them so they do not overlap?
https://jsfiddle.net/ramgp76m/
var testdata = [[{'x':0,'y':0.18308100617846632},{'x':1,'y':0.18308100617846632},{'x':2,'y':0.18308100617846632},{'x':3,'y':0.18308100617846632},{'x':4,'y':0.18308100617846632},{'x':5,'y':0.18308100617846632},{'x':6,'y':0.18308100617846632},{'x':7,'y':0.18308100617846632},{'x':8,'y':0.18308100617846632},{'x':9,'y':0.18308100617846632},{'x':10,'y':0.18308100617846632},{'x':11,'y':0.18308100617846632},{'x':12,'y':0.18308100617846632},{'x':13,'y':0.18308100617846632}],[{'x':0,'y':0.3848121729491284},{'x':1,'y':0.3848121729491284},{'x':2,'y':0.6064571483967448},{'x':3,'y':0.3848121729491284},{'x':4,'y':0.3848121729491284},{'x':5,'y':0.3848121729491284},{'x':6,'y':0.3848121729491284},{'x':7,'y':0.3848121729491284},{'x':8,'y':0.3848121729491284},{'x':9,'y':0.3848121729491284},{'x':10,'y':0.3848121729491284},{'x':11,'y':0.3848121729491284},{'x':12,'y':0.3848121729491284},{'x':13,'y':0.3848121729491284}],[{'x':0,'y':0.1399518819223031},{'x':1,'y':0.1399518819223031},{'x':2,'y':0.1399518819223031},{'x':3,'y':0.1399518819223031},{'x':4,'y':0.1399518819223031},{'x':5,'y':0.1399518819223031},{'x':6,'y':0.1399518819223031},{'x':7,'y':0.1399518819223031},{'x':8,'y':0.1399518819223031},{'x':9,'y':0.1399518819223031},{'x':10,'y':0.1399518819223031},{'x':11,'y':0.1399518819223031},{'x':12,'y':0.1399518819223031},{'x':13,'y':0.1399518819223031}],[{'x':0,'y':0.661327785950392},{'x':1,'y':0.661327785950392},{'x':2,'y':0.661327785950392},{'x':3,'y':0.661327785950392},{'x':4,'y':0.661327785950392},{'x':5,'y':0.661327785950392},{'x':6,'y':0.661327785950392},{'x':7,'y':0.661327785950392},{'x':8,'y':0.661327785950392},{'x':9,'y':0.661327785950392},{'x':10,'y':0.661327785950392},{'x':11,'y':0.661327785950392},{'x':12,'y':0.661327785950392},{'x':13,'y':0.661327785950392}],[{'x':0,'y':0.12912787561339684},{'x':1,'y':0.19822891999644937},{'x':2,'y':0.19524003452978822},{'x':3,'y':0.2022421270610378},{'x':4,'y':2.9546625202733403},{'x':5,'y':0.17245495458323432},{'x':6,'y':0.17518206801386724},{'x':7,'y':0.19136958873352614},{'x':8,'y':0.20233322594961195},{'x':9,'y':0.791354544787474},{'x':10,'y':1.8421373975341035},{'x':11,'y':0.50545378694344},{'x':12,'y':0.15839045811626706},{'x':13,'y':0.17249910157699552}]].map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
testdata[1].type = "bar";
testdata[1].yAxis = 1;
testdata[2].type = "bar";
testdata[2].yAxis = 1;
testdata[3].type = "bar";
testdata[3].yAxis = 2;
testdata[4].type = "bar";
testdata[4].yAxis = 2;
nv.addGraph(function() {
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis1.tickFormat(d3.format(',.1f'));
chart.yAxis2.tickFormat(d3.format(',.1f'));
chart.bars1.stacked(true);
chart.bars2.stacked(true);
chart.bars1.groupSpacing(0.5);
chart.bars2.groupSpacing(0.5);
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
return chart;
});
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
<link href="https://nvd3-community.github.io/nvd3/build/nv.d3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<script src="https://nvd3-community.github.io/nvd3/build/nv.d3.js"></script>
<div id="chart1" >
<svg> </svg>
</div>
Here's what I did different to your code.
Changed nv.models.multiChart() to nv.models.multiBarChart()
Updated chart to include :
.showControls(false)
.stacked(true);
Replaced the chart properties to the following :
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
//chart.xAxis.tickFormat(d3.format(',f'));
//chart.yAxis.tickFormat(d3.format(',.1f'));
//chart.yAxis2.tickFormat(d3.format(',.1f'));
//chart.bars1.stacked(true);
//chart.bars2.stacked(true);
//chart.bars1.groupSpacing(0.5);
//chart.bars2.groupSpacing(0.5);
You can find a working version of your code here
Hope it helps.
Related
Pie Chart not rendering in dashboard area using D3 v5
I have been trying to render a simple two value pie chart using D3.JS v5 in the lower right corner to no avail. Can someone please assist me with this - the code can be found here:
Codepen
<body>
<div id = "orgChart"></div>
<div id = "mapChart"></div>
<div id = "pieChart"></div>
<script>
/******************************************************************************
Pie Chart
******************************************************************************/
function makePie() {
var widthPie = (window.innerWidth * 0.3) ,
heightPie = (window.innerHeight * 0.3);
var data = [
{name: "Males", count: 43, percent: 61 }
, {name: "Females", count: 27, percent: 39}
];
var pie = d3.pie().value(d=>d.count).padAngle(0.025)(data);
var arcMkr = d3.arc().innerRadius(20).outerRadius(35)
.cornerRadius(4);
var scC = d3.scaleOrdinal(d3.schemePastel1)
.domain(pie.map(d=>d.index));
var g = d3.select("#pieChart")
.append("g").attr("transform", "translate(widthPie/2, heightPie/2)");
g.selectAll("path.x").data(pie).enter().append("path")
.attr("d", arcMkr)
.attr("fill", d=> scC(d.index)).attr("stroke", "grey");
g.selectAll("text.x" ).data( pie ).enter().append( "text")
.text(d => d.data.name +": " + d.data.percent + "%")
.attr("x", d=>arcMkr.innerRadius(20).centroid(d)[0])
.attr("y", d=>arcMkr.innerRadius(20).centroid(d)[1])
.attr("font-family", "sans-serif").attr( "font-size", 8)
.attr("text-anchor", "middle")
;
}
makePie();
</script>
As #Tom Shanley has indicated in the comments, the reason of why your pie chart is not rendered as expected is because you need to create a SVG first.
Notice that I've also changed some CSS properties of #pieChart for improving the snippet visibility, although it is not necessary for your purposes.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name = 'viewport' content = 'width = device-width, initial-scale = 1.0'>
<meta http-equiv = 'X-UA-Compatible' content = 'ie=edge'>
<meta name = 'author' content = "Tom Bellmer">
<meta name = 'date.created' content="03/05/2020">
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<title>Org Chart</title>
<style>
body{
background-color: #faf2e4;
font-family: sans-serif;
font-size: 1.2em;
}
text{font-size: .6em}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1px;
}
.node text {
font: 9px sans-serif;
font-weight: normal;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
#orgChart{
position:absolute;
top: 10px;
left: 10px;
width: 65%;
height: 85%;
}
#mapChart{
position:absolute;
top: 10px;
left: 66%;
width: 34%;
height: 50%;
}
#pieChart{
position:absolute;
top: 51%;
left: 66%;
width: 34%;
height: 55%;
background-color: crimson;
}
circle {
/* fill: #FF8533; */
fill: steelblue;
fill-opacity: .8;
stroke: #fff;
}
circle:hover { fill: red;}
div.tooltip {
position: absolute;
text-align: center;
width: 130px;
height: 14px;
padding: 2px;
font: 11px sans-serif;
background: dodgerblue;
color: white;
border: 0px;
pointer-events: none;
}
svg g{
fill: white;
stroke: black;
}
svg text{fill: black;}
</style>
</head>
<body>
<div id = "orgChart"></div>
<div id = "mapChart"></div>
<div id = "pieChart"></div>
<script>
/******************************************************************************
Pie Chart
******************************************************************************/
function makePie() {
var widthPie = (window.innerWidth * 0.5) ,
heightPie = (window.innerHeight * 0.5);
var data = [
{name: "Males", count: 43, percent: 61 },
{name: "Females", count: 27, percent: 39}
];
var pie = d3.pie().value(d=>d.count).padAngle(0.025)(data);
var arcMkr = d3.arc().innerRadius(20).outerRadius(35)
.cornerRadius(4);
var scC = d3.scaleOrdinal(d3.schemePastel1)
.domain(pie.map(d=>d.index));
// Modified ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var svg = d3.select("#pieChart")
.append("svg")
.attr("width", widthPie)
.attr("height", heightPie);
var g = svg.append("g").attr("transform", `translate(${widthPie/2}, ${heightPie/2})`);
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
g.selectAll("path.x").data(pie).enter().append("path")
.attr("d", arcMkr)
.attr("fill", d=> scC(d.index)).attr("stroke", "grey");
g.selectAll("text.x" ).data( pie ).enter().append( "text")
.text(d => d.data.name +": " + d.data.percent + "%")
.attr("x", d=>arcMkr.innerRadius(20).centroid(d)[0])
.attr("y", d=>arcMkr.innerRadius(20).centroid(d)[1])
.attr("font-family", "sans-serif").attr( "font-size", 8)
.attr("text-anchor", "middle");
}
makePie();
</script>
</body>
Nested selection with Update
I've built what I think is the most current solution for a nested selection with an update pattern.
However, each time update is clicked, I always get the outer selection, but not always the inner (nested) selection. The log to console show a correctly formed array of arrays.
Is this the correct setup for a nested selection in v5?
Here's a codepen
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>#</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style type="text/css">
.outer {
border: 1px solid black;
background-color: grey;
width: 100%;
height: 100px;
position: relative;
display: flex;
}
.inner {
display: flex;
justify-content: flex-start;
border: 1px solid blue;
background-color: cyan;
width: 50px;
height: 50px;
position: relative;
}
</style>
</head>
<body>
<button id='update'>update</button>
<div id="anchor"></div>
<script>
const updateButton = document.getElementById('update');
const anchor = d3.select('#anchor');
updateButton.addEventListener('click', function() {
update(
Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Math.ceil(Math.random() * 5);
});
})
);
});
function update(data) {
const outer = anchor.selectAll('.outer').data(data);
outer.exit().remove();
outer.enter()
.append('div')
.merge(outer)
.attr("class", "outer");
const inner = outer.selectAll('.inner').data(function(d) {
return d;
});
inner.exit().remove();
inner.enter()
.append('div')
.merge(inner)
.attr("class", "inner")
.text(function(d) {
return d;
});
}
</script>
</body>
</html>
In a case like this one you have to reassign the update selection, so its reference is merged with the enter selection (here I'm changing const for let in order to reassign the selection):
//here is the update selection:
let outer = anchor.selectAll('.outer').data(data);
//here is the enter selection:
const outerEnter = outer.enter()
.append('div')
.attr("class", "outer");
//reassigning here:
outer = outerEnter.merge(outer);
Otherwise other will be only the update selection, even if you have a merge method chained in the enter selection. You can clearly see this if you console outer.size().
Here is your code with that change:
const updateButton = document.getElementById('update');
const anchor = d3.select('#anchor');
updateButton.addEventListener('click', function() {
update(
Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Math.ceil(Math.random() * 5);
});
})
);
});
function update(data) {
let outer = anchor.selectAll('.outer').data(data);
outer.exit().remove();
const outerEnter = outer.enter()
.append('div')
.attr("class", "outer");
outer = outerEnter.merge(outer);
const inner = outer.selectAll('.inner').data(function(d) {
return d;
});
inner.exit().remove();
inner.enter()
.append('div')
.attr("class", "inner")
.merge(inner)
.text(function(d) {
return d;
});
}
.outer {
border: 1px solid black;
background-color: grey;
width: 100%;
height: 100px;
position: relative;
display: flex;
}
.inner {
display: flex;
justify-content: flex-start;
border: 1px solid blue;
background-color: cyan;
width: 50px;
height: 50px;
position: relative;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<button id='update'>update</button>
<div id="anchor"></div>
How to rotate the text labels for the x Axis of a nvd3.js line chart
I am new to nvd3 and d3 js.I am creating a line chart using nvd3. Now i want to rotate the text labels for the x Axis of the line chart.How to implement this?
I tried using
var xTicks = d3.selectAll('g.tick');
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return ' rotate(-90 0,0)' }) ;
but was unsuccessful
My current code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.dashed {
stroke-dasharray: 5,5;
}
</style>
<script type="text/javascript">
function download()
{
img = new Image(),
serializer = new XMLSerializer(),
svgStr = serializer.serializeToString(document.getElementById('svg'));
img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
// You could also use the actual string without base64 encoding it:
//img.src = "data:image/svg+xml;utf8," + svgStr;
var canvas = document.createElement("canvas");
var w=3000;
var h=3000;
canvas.width = w;
canvas.height = h;
canvas.getContext("2d").drawImage(img,0,0,w,h);
var imgURL = canvas.toDataURL("image/png");
var dlLink = document.createElement('a');
dlLink.download = "image";
dlLink.href = imgURL;
dlLink.dataset.downloadurl = ["image/png", dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
</script>
</head>
<body class='with-3d-shadow with-transitions'>
<div style="position:absolute; top: 0; left: 0;">
<button onclick="randomizeFillOpacity();">Randomize fill opacity</button>
<button onclick="expandLegend();">Expand/Contract Legend</button>
<script>
var expandLegend = function() {
var exp = chart.legend.expanded();
chart.legend.expanded(!exp);
chart.update();
}
</script>
</div>
<div id="chart1" width="100%" height='100%'></div>
<button onclick="download()">Download</button>
<script>
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
var chart;
var data;
var randomizeFillOpacity = function() {
var rand = Math.random(0,1);
for (var i = 0; i < 100; i++) { // modify sine amplitude
data[4].values[i].y = Math.sin(i/(5 + rand)) * .4 * rand - .25;
}
data[4].fillOpacity = rand;
chart.update();
};
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'))
.staggerLabels(true)
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(function(d) {
if (d == null) {
return 'N/A';
}
return d3.format(',.2f')(d);
})
;
data = sinAndCos();
d3.select('#chart1').append('svg')
.datum(data)
.attr("id","svg")
.attr("height","1000")
.attr("width","1000")
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() {
var /*sin = [],
sin2 = [],*/
cos = [],
/* rand = [],*/
rand2 = []
;
for (var i = 0; i < 100; i++) {
cos.push({x: i, y: .5 * Math.cos(i/10)});
rand2.push({x: i, y: Math.cos(i/10) + Math.random() / 10 })
}
return [
{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
},
{
values: rand2,
key: "Random Cosine",
color: "#667711",
strokeWidth: 3.5,
fillOpacity: .1,
classed: 'dashed',
area: true,
}
];
}
</script>
</body>
</html>
This will work: chart.xAxis .rotateLabels(-45)
How to get value of corresponding x-axis label on click event of rectangular bars in nvd3.js historical chart
I have created a historical bar chart using nvd3 js. I want to get the value of corresponding x-axis label when a bar is clicked. How to get value of corresponding x-axis label on click event of rectangular bars in nvd3.js historical chart?
My current code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<svg id="test1"></svg>
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart
.margin({left: 100, bottom: 100})
.useInteractiveGuideline(true)
.duration(250)
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#test1')
.datum(sinData())
.transition()
.call(chart);
var rectArray=d3.select('g.nv-bars').selectAll('rect').on('click',function(d,i){alert(d+i)});
nv.utils.windowResize(chart.update);
return chart;
});
//Simple test data generators
function sinAndCos() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i*2, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{values: sin, key: "Sine Wave", color: "#ff7f0e"},
{values: cos, key: "Cosine Wave", color: "#2ca02c"}
];
}
function sinData() {
var sin = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10) * Math.random() * 100});
}
return [{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
}];
}
</script>
</body>
</html>
Fix tooltips on horizontal bar chart d3.js
I want to make a similar tooltip like this example but in my chart the tooltips do not show at the end of each bar. I was trying to fix it by adjusting offset([-10, 350]). I can see the tooltips moved but not all of them appear at the end. Anyone can tell me how to fix it? Thanks a lot!
<!DOCTYPE html>
<html>
<style>
.axis {
font-family: Helvetica;
font-size: 1em;
font-weight: bold;
color: #444444;
}
.axis path,
.axis line {
fill: none;
stroke: white;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.bar:hover {
opacity: 0.7;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: #aaaaaa;
color: #aa123f;
border-radius: 6px;
font-family: Helvetica;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: #aaaaaa;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<head>
<!-- D3.js -->
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<div id="barChart"></div>
<script>
var data = [
{y:"Group1", x: 3.5},
{y:"Group2", x: 4.5},
{y:"Group3", x: 3.8}
];
var margin = {top: 40, right: 20, bottom: 30, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.
linear().
range([0, width]);
var y = d3.scale.
ordinal().
rangeRoundBands([0, height], 0.3);
var xAxis = d3.
svg.
axis().
scale(x).
orient("bottom");
var yAxis = d3.svg.axis().
scale(y).
orient("left");
x.domain([1, 5]);
y.domain(data.map(function(d) { return d.y; }));
var tipBars = d3.tip().
attr('class', 'd3-tip').
offset([-10, 350]).
html(function(d) {
return '<strong style="color:grey">Result:</strong> <span style="color:grey">' + d.x +
'</span>';
});
var svg = d3.select("#barChart").
append("svg").
attr("width", width + margin.left + margin.right).
attr("height", height + margin.top + margin.bottom).
append("g").
attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var plot = svg.
append("g").
attr('transform', 'translate(' + 0 + ',' + 0 + ')');
var plotBars = plot.selectAll("g").
data(data).
enter().
append("g").
attr('class', 'bars');
svg.call(tipBars);
var bars = plotBars.
append("rect").
attr("x", function(d) { return 0; }).
attr("width",function(d) { return x(d.x);}).
attr("y", function(d) { return y(d.y);}).
attr("height", y.rangeBand()).
attr("class", "bar").
attr("fill","grey").
on('mouseover', tipBars.show).
on('mouseout', tipBars.hide);
svg.append("g").
attr("class", "x axis").
style('font-family', ' Helvetica').
call(xAxis);
svg.append("g").
attr("class", "y axis").
style('font-family', ' Helvetica').
call(yAxis);
</script>
</body>
</html>
Use d3.tip.direction() to set the positioning. Docs
var tipBars = d3.tip()
.attr('class', 'd3-tip')
.direction('e')
.html(function(d) {
return '<strong style="color:grey">Result:</strong> <span style="color:grey">' + d.x +
'</span>';
});