I'm trying to display labels on the x axis on the bar chart as shown below but it only shows every other one. Does anyone know how to display all?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>
<body>
<h2>multiBarChart</h2>
<div id="multibarchart"><svg style="height:350px;width:800px;"></svg></div>
<script>
data_multibarchart = [{
"values": [{
"y": 4,
"x": 'a'
}, {
"y": 9,
"x": 'b'
}, {
"y": 9,
"x": 'c'
}, {
"y": 5,
"x": 'd'
}, {
"y": 6,
"x": 'e'
}, {
"y": 4,
"x": 'f'
}, {
"y": 1,
"x": 'g'
}, {
"y": 7,
"x": 'h'
}, {
"y": 6,
"x": 'i'
}, {
"y": 2,
"x": 'j'
}],
"key": "Count",
"yAxis": "1"
}, {
"values": [{
"y": 8,
"x": 'a'
}, {
"y": 18,
"x": 'b'
}, {
"y": 18,
"x": 'c'
}, {
"y": 10,
"x": 'd'
}, {
"y": 12,
"x": 'e'
}, {
"y": 8,
"x": 'f'
}, {
"y": 2,
"x": 'g'
}, {
"y": 14,
"x": 'h'
}, {
"y": 12,
"x": 'i'
}, {
"y": 4,
"x": 'j'
}],
"key": "Duration",
"yAxis": "1"
}];
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.margin({
top: 30,
right: 60,
bottom: 70,
left: 60
});
var datum = data_multibarchart;
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = String(graph.point.x);
var y = String(graph.point.y);
if (key == 'Count') {
var y = String(graph.point.y) + ' call';
}
if (key == 'Duration') {
var y = String(graph.point.y) + ' min';
}
tooltip_str = '<center><b>' + key + '</b></center>' + y + ' at ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#multibarchart svg').datum(datum).transition().duration(500).attr('height', 350).call(chart);
});
</script>
</body>
</html>
I figured out. I just had to make them visible:
d3.selectAll('#multibarchart svg .tick text').style("opacity", 1);
Note that I also tried setting:
chart.reduceXTicks = false;
chart.staggerLabels = false;
chart.wrapLabels = false;
but this did NOT help.
Related
Suppose I have a grid in javascript represented as such: ** Note this is just a tiny grid to serve as an example.
{
"width": 5,
"height": 5,
"nodes": [
[{
"x": 0,
"y": 0,
"walkable": true
}, {
"x": 1,
"y": 0,
"walkable": true
}, {
"x": 2,
"y": 0,
"walkable": true
}, {
"x": 3,
"y": 0,
"walkable": true
}, {
"x": 4,
"y": 0,
"walkable": true
}],
[{
"x": 0,
"y": 1,
"walkable": true
}, {
"x": 1,
"y": 1,
"walkable": true
}, {
"x": 2,
"y": 1,
"walkable": true
}, {
"x": 3,
"y": 1,
"walkable": true
}, {
"x": 4,
"y": 1,
"walkable": true
}],
[{
"x": 0,
"y": 2,
"walkable": true
}, {
"x": 1,
"y": 2,
"walkable": true
}, {
"x": 2,
"y": 2,
"walkable": true
}, {
"x": 3,
"y": 2,
"walkable": true
}, {
"x": 4,
"y": 2,
"walkable": true
}],
[{
"x": 0,
"y": 3,
"walkable": true
}, {
"x": 1,
"y": 3,
"walkable": true
}, {
"x": 2,
"y": 3,
"walkable": true
}, {
"x": 3,
"y": 3,
"walkable": true
}, {
"x": 4,
"y": 3,
"walkable": true
}],
[{
"x": 0,
"y": 4,
"walkable": true
}, {
"x": 1,
"y": 4,
"walkable": true
}, {
"x": 2,
"y": 4,
"walkable": true
}, {
"x": 3,
"y": 4,
"walkable": true
}, {
"x": 4,
"y": 4,
"walkable": true
}]
]
}
The "walkable" boolean will determine which areas are blocked off so to speak.
How would I flood this grid to mark the isolated areas? In the above example, a flood fill would fill the entire grid with a single color, because all areas are walkable. But supposing the grid had some areas which were unreachable from other areas (based on the walkable bool), how would I mark the different areas? I basically want to set a color property for each node. If the node isn't the same color as another node, then I know it can't be reached from that node.
EDIT:
Here's what I have so far. Can't run this on a node without getting a maximum call stack error:
function floodFill(node, grid) {
if (node.walkable == false) {
return;
}
if ((node.floodColor != undefined) && (node.floodColor == 'red')) {
return;
}
node.floodColor = 'red';
if ((grid.nodes[node.y + 1] != undefined) && (grid.nodes[node.y + 1][node.x] != undefined)) {
floodFill(grid.nodes[node.y + 1][node.x], grid);
}
if ((grid.nodes[node.y - 1] != undefined) && (grid.nodes[node.y - 1][node.x] != undefined)) {
floodFill(grid.nodes[node.y - 1][node.x], grid);
}
if ((grid.nodes[node.y] != undefined) && (grid.nodes[node.y][node.x + 1] != undefined)) {
floodFill(grid.nodes[node.y][node.x + 1], grid);
}
if ((grid.nodes[node.y] != undefined) && (grid.nodes[node.y][node.x - 1] != undefined)) {
floodFill(grid.nodes[node.y][node.x - 1], grid);
}
}
For those of you who did answer, the above is the sort of thing i am looking for. Descriptions of what to do don't help me, as I've already read quite a bit of descriptions of what to do. Explicit code please :p
Simply repeat flood-fill from many different locations. Just make sure to not fill the same area twice and your algorithm would still work in linear time, assuming reasonable representation of neighborhood (for example a matrix).
n_colors = 0;
for field in grid:
if field has no color assigned yet:
floodFill(fromField: field, color: n_colors)
n_colors = n_colors + 1
I will try this :
first create a resultMap which is a copy of your current grid with a color attribute by point, set all the walkable === false points to color: black
const floodMap = yourData.nodes
.map(n => n.map(p => {...p, {color: p.walkable ? 'black': undefined ));
create a function flood(x, y, color) which take a point in input. If this point is already colored, then do nothing (and return false), otherwise apply color take the (4 or 8 according to your rule) connected points if they aren't colored, and run flood(x', y', color) on them (and return true).
function flood(x, y, color) {
if(!floodMap[y][x].color) {
floodMap(x + 1, y, color);
floodMap(x - 1, y, color);
floodMap(x, y + 1, color);
floodMap(x, y - 1, color);
return true;
}
return false;
}
apply this function for each point of the matrix by changing the color each time the previous call have returned true.
const colors = ['red', 'blue', 'yellow', 'green', 'purple'];
const currentColor = 0;
floodMap.forEach(n => n.forEach(p => {
const flooded = flood(p.x, p.y, colors[currentColor]);
if(flooded) currentColor++;
}));
I have data in a multidimensional array in the form of:
data = [
[
{
"x": 329, "y": 484.8333333333333
},
{
"x": 439, "y": 484.8333333333333
},
{
"x": 439, "y": 484.8333333333333
},
{
"x": 549, "y": 484.8333333333333
}
], [
{
"x": 559, "y": 484.8333333333333
},
{
"x": 669, "y": 484.8333333333333
},
{
"x": 669, "y": 484.8333333333333
},
{
"x": 779, "y": 484.8333333333333
}
], [
{
"x": 329, "y": 313.8333333333333
},
{
"x": 439, "y": 313.8333333333333
},
{
"x": 439, "y": 253.83333333333331
},
{
"x": 549, "y": 253.83333333333331
}
], [
{
"x": 559, "y": 313.8333333333333
},
{
"x": 669, "y": 313.8333333333333
},
{
"x": 669, "y": 253.83333333333331
},
{
"x": 779, "y": 253.83333333333331
}
], etc.
]
Each array is the coordinates for one step-before path connecting two svg elements. I've defined a function for generating a path:
stepFuction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("step-before");
I am attempting to instantiate the paths like so:
step = svg.selectAll("path")
.data(_.each(stepData, (d) => { return d; }))
.enter()
.append("path")
.attr("class", "line")
.attr("d", stepFuction);
Rather than a step-before path, I'm getting a bowtie looking shape (see attachment). Obviously, I am doing something wrong, I'm assuming it has something to do with using _.each inside the data method.
1) What is the correct approach to creating one path per array in my data array?
I would like to be able to drag the elements around and have these paths update. I am using d3.on("tick") for nodes, labels and groups with something like:
node.attr("x", function (d) { return d.x - d.width / 2 + pad; })
.attr("y", function (d) { return d.y - d.height / 2 + pad; });
and it is working correctly but I'm not sure how to update paths as there are multiple values that need to be recalculated on every tick.
2) What is the correct approach to updating these step-before paths on each tick?
I created a fiddle if anything wasn't clear in my description:
d3 step-before fiddle
I think this is actually to do with stylings.
Fiddle
Added this css code:
path {
stroke-width: 1px;
fill: none;
stroke: black;
}
Using d3js, I need to draw(append) circles, not all together but with less then one second of distance. So one circle in x position, another one in y position after 0.5 second.
Use setTimeout. Here is the working code snippet.
var nodes = [{
"name": "6",
"x": 207,
"y": 305
}, {
"name": "7",
"x": 404,
"y": 310
}, {
"name": "8",
"x": 420,
"y": 510
}, {
"name": "9",
"x": 540,
"y": 126
}, {
"name": "10",
"x": 350,
"y": 150
}, {
"name": "11",
"x": 177,
"y": 320
}, {
"name": "12",
"x": 200,
"y": 190
}, {
"name": "13",
"x": 170,
"y": 150
}, {
"name": "14",
"x": 107,
"y": 510
}, {
"name": "15",
"x": 104,
"y": 150
}, {
"name": "16",
"x": 104,
"y": 150
}, {
"name": "17",
"x": 310,
"y": 160
}, {
"name": "18",
"x": 120,
"y": 110
}, {
"name": "19",
"x": 619,
"y": 145
}, {
"name": "20",
"x": 148,
"y": 107
}, {
"name": "21",
"x": 575,
"y": 107
}];
var width = 500,
height = 400;
var color = d3.scale.category20();
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
nodes.forEach(function(d, i) {
setTimeout(function() {
svg.append("circle")
.datum(d)
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", "10")
.style("fill", function(d) {
return color(i);
});
}, 500 * i);
});
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.overlay {
fill: none;
pointer-events: all;
}
#map{
border: 2px #555 dashed;
width:500px;
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<div id="map"></div>
</body>
You can use the standard javascript methods setTimeout or setInterval to append the circles one by one with a variable delay depending on the circle index.
Or, you could create all the circles on enter normally using the standard d3 syntax but with opacity set to 0 and just add a .transition() with delay dependent on the index that sets opacity to 1
Here's a working jsfiddle of the latter option: http://jsfiddle.net/pg5m3m3n/5/
Extract:
canvas.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
'cx': function(d) { return d.x; },
'cy': function(d) { return d.y; },
'r': 10,
'opacity': 0
})
.transition().delay(function(d,i) { return i*50; })
.attr('opacity',1);
The pros of this is that it uses d3 syntax and it's just 2 lines of code more than the normal append, the con is that the circles are actually added immediately and only become visible one by one, which may give performance issues if the number of circles to append is huge.
3 library for graph generation & i am facing problems while setting the X & Y axis for the intervals based upon values. I want to know whether NVD3's java script has inbuilt capabilities to adjust the X axis intervals based upon the number on records inside the data?
I am generating the graph & it possibly sets the y axis's first value to the lowest value of the sample data. If i need to start the y axis from 0 too then how should it be done?
sample data:
var data = [{
"key": "30 Day",
"values": [{
"x": 0,
"y": 18
}, {
"x": 1,
"y": 24
}, {
"x": 2,
"y": 23
}, {
"x": 3,
"y": 27
},{
"x": 4,
"y": 24
},{
"x": 5,
"y": 31
},{
"x": 6,
"y": 37
},{
"x": 7,
"y": 46
},{
"x": 8,
"y": 32
},{
"x": 9,
"y": 23
},{
"x": 10,
"y": 30
}]
}];
Several NVD3 charts support xDomain/yDomain options. For example:
var chart = nv.models.lineChart();
chart.xDomain( [ 0, 10 ] ).yDomain( [ 0, 50 ] );
I'm trying to create a stack bar graph using the stack layout.
I can make it work only if I pass it an array of x,y coordinates. But I want to be able to add meta data to it, such as series title.
I've read the docs (https://github.com/mbostock/d3/wiki/Stack-Layout), and seen how it's done on a steamgraph (Correct usage of stack.values([accessor]) in D3 Streamgraph?). The problem with these examples is that they don't take into account things like y scale, making it difficult to establish variables such as yStackMax.
I also need the data to be passed to the stack() function early on, because I'm planning to redraw this and other things when the data is refreshed. In short, instead of:
var data = [
[
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
],
[
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
],
[
{ "x": 0, "y": 10},
{ "x": 1, "y": 25}
]
];
var layers = d3.layout.stack()(data);
var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
... which works, I want to be able to do:
var data = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
},
{
"name": "potatoes",
"values": [
{ "x": 0, "y": 10},
{ "x": 1, "y": 25}
]
}
];
var layers = d3.layout.stack()(data).values(function(d) { return d.values; });
var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
... which doesn't work.
This is the working code fiddle: http://jsfiddle.net/StephanTual/E6FeP/
This is the fiddle for the code that doesn't work: http://jsfiddle.net/StephanTual/Tnj8W/
Here's an updated fiddle.
The key part was:
// define the accessor before adding in the data
var layers = d3.layout.stack().values(function(d) { return d.values; })(data);
var yStackMax = d3.max(layers, function(layer) { return d3.max(layer.values, function(d) { return d.y0 + d.y; }); });
And then I made a couple other adjustments as necessary to access the .values.