D3 - Update bar chart per 2 seconds

D3 - Update bar chart per 2 seconds - javascript

I have a D3 bar chart, with some data drawn initially. I will be getting new data per 2 seconds. This new data could be new items or new counts for existing items. I want to update the chart accordingly.
This is what I have tried:
https://jsfiddle.net/rutwick/an1d95h1/2/
var sales = [
{ product: 'Hoodie', count: 7 },
{ product: 'Jacket', count: 6 },
{ product: 'Snuggie', count: 9 },
{ product: 'Beanie', count: 8 }
];
var startTimer = false;
function drawGraph() {
//select the svg
var svg = d3.select('svg');
//Select all the rect elements and assign the data to them
var rects = svg.selectAll('rect')
.data(sales);
//This will access the rect element for creating new rect elements
var newRects = rects.enter();
// recall that scales are functions that map from
// data space to screen space
// Max limit for Y axis
var maxCount = d3.max(sales, function(d, i) {
return d.count;
});
//X axis will have bars, hence ordinal scale used
//domain - data - Product values
//Rangebound specifies max limit and the padding around the bands
var x = d3.scale.ordinal()
.domain(sales.map(function(d) {
return d.product;
}))
.rangeRoundBands([0, 500], 0.10); //300 = Total width of all bars, 0.10 = Factor of space between the bars
//Y axis is linear, hence linear scale used
var y = d3.scale.linear()
.range([400, 0])
.domain([0, maxCount]);
newRects.append('rect')
.attr('x', function(d) {
return x(d.product);
})
.attr('y', function(d, i) {
return y(d.count);
})
.attr('width', x.rangeBand())
.attr('height', function(d, i) {
return 400 - y(d.count);
});
startTimer = true;
rects.exit().remove();
}
function updateGraph(){
if(!startTimer) {
return;
}
var rand = Math.floor(Math.random() * sales.length);
/*if(sales[rand].count % 2 === 0) {
sales[rand].count += 2;
console.log(sales[rand].count);
}*/
sales.push({ product: 'Denim', count: 1 });
sales.push({ product: 'Sweatshirt', count: 12 });
drawGraph();
}
setInterval(updateGraph, 2000);
drawGraph();
It updates, but doesn't redraw the chart. Just adds the new bars over the old ones. My current plan includes removing all the rect elements using jQuery, but I don't know if it will work.
What exactly needs to be done to update the complete chart, both on x and y axes?

You can do it this way:
First you need to define the object like this:
var rects = svg.selectAll('rect')
.data(sales, function(d){/*Unique ID of a record*/ return d.product;});
Now create rectangle like this:
newRects.append('rect');
Now update all the rect with new width and height.
//do update
d3.selectAll("rect")
.attr('class', "rects")
.attr('x', function(d) {
console.log(d)
return x(d.product);
})
.attr('y', function(d, i) {
return y(d.count);
})
.attr('width', x.rangeBand())
.attr('height', function(d, i) {
return 400 - y(d.count);
});
Finally remove bars for which data has been removed:
//remove not there
rects.exit().remove()
The problem why your code was not updating:
When you do this the attribute update only on create
newRects.append('rect')
.attr('x', function(d) {
return x(d.product);
})
.attr('y', function(d, i) {
return y(d.count);
})
.attr('width', x.rangeBand())
.attr('height', function(d, i) {
return 400 - y(d.count);
});
Working code here
Hope this helps!

You can use setInterval() function to call particular function for a given period. So you just written an update function to update graph and set it as an argument of setInterval function.
For Example:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var dps1 = []; // dataPoints
var dps2 = []; // dataPoints
var dps3 = []; // dataPoints
var dps4= []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
axisY: {
includeZero: false
},
data: [{
type: "spline",
dataPoints: dps1
},{
type: "spline",
dataPoints: dps2
},{
type: "spline",
dataPoints: dps3
},{
type: "spline",
dataPoints: dps4
}
]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps1.push({
x: xVal,
y: yVal
});
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps2.push({
x: xVal,
y: yVal
});
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps3.push({
x: xVal,
y: yVal
});
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps4.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps1.length > dataLength) {
dps1.shift();
}
if (dps2.length > dataLength) {
dps2.shift();
}
if (dps3.length > dataLength) {
dps3.shift();
}
if (dps4.length > dataLength) {
dps4.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Here I update my chart in every one seconds.

Related

Transform parsed percentage data into new array

Assume data parsed from a tsv like so:
tsvData.then(function(rawData) {
var data = rawData.map(function(d) {
return {year:+d.year, age3:+d.age3*100, age1:+d.age1*100, age2:+d.age2*100, age4:+d.age4*100, age5:+d.age5*100, age6:+d.age6*100, age7:+d.age7*100}
});
And assume that we intend to create a square matrix representing these percentages (1 rect = 1%, each age group = different color):
var maxColumn = 10;
var colorMap = {
0:"#003366",
1:"#366092",
2:"#4f81b9",
3:"#95b3d7",
4:"#b8cce4",
5:"#e7eef8",
6:"#f6d18b"
};
graphGroup.selectAll('rect')
.data(data1)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i % maxColumn) * 30
})
.attr('y', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 30
})
.attr('width', 20)
.attr('height', 20)
.style('fill', function(d) {
return colorMap[d];
});
We would need some way to transform data so that it has 100 items, and those 100 items need to match the proportions of data. For simplicity let's just evaluate at data[0]. Here is my solution:
var data1 = d3.range(100).map(function(d,i) {
var age1 = data[0].age1;
var age2 = data[0].age2;
var age3 = data[0].age3;
var age4 = data[0].age4;
var age5 = data[0].age5;
var age6 = data[0].age6;
var age7 = data[0].age7;
if (i<age1) {
return 0;
} else if (i>age1 && i<(age1+age2)) {
return 1;
} else if (i>(age1+age2) && i<(age1+age2+age3)) {
return 2;
} else if (i>(age1+age2+age3) && i<(age1+age2+age3+age4)) {
return 3;
} else if (i>(age1+age2+age3+age4) && i<(age1+age2+age3+age4+age5)) {
return 4;
} else if (i>(age1+age2+age3+age4+age5) && i<(age1+age2+age3+age4+age5+age6)) {
return 5;
} else if (i>(age1+age2+age3+age4+age5+age6) && i<(age1+age2+age3+age4+age5+age6+age7)) {
return 6;
}
});
It kind of works, but it's not scalable at all, but I can't imagine how else one transforms the arrays. Just so we are clear, by transforming arrays I mean we start with:
data = [
{'age1':33.66, 'age2':14.87, 'age3':18, 'age4':14, 'age5':11, 'age6':5, 'age7':3}
];
and end with:
data1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1...];
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
//var tsvData = d3.tsv('so-demo3.tsv');
var maxColumn = 10;
//tsvData.then(function(rawData) {
/*
var data = rawData.map(function(d) {
return {year:+d.year, age3:+d.age3*100, age1:+d.age1*100, age2:+d.age2*100, age4:+d.age4*100, age5:+d.age5*100, age6:+d.age6*100, age7:+d.age7*100}
});
*/
var data = [
{'age1':33.66, 'age2':14.87, 'age3':18, 'age4':14, 'age5':11, 'age6':5, 'age7':3}
];
var data1 = d3.range(100).map(function(d,i) {
var age1 = data[0].age1;
var age2 = data[0].age2;
var age3 = data[0].age3;
var age4 = data[0].age4;
var age5 = data[0].age5;
var age6 = data[0].age6;
var age7 = data[0].age7;
if (i<age1) {
return 0;
} else if (i>age1 && i<(age1+age2)) {
return 1;
} else if (i>(age1+age2) && i<(age1+age2+age3)) {
return 2;
} else if (i>(age1+age2+age3) && i<(age1+age2+age3+age4)) {
return 3;
} else if (i>(age1+age2+age3+age4) && i<(age1+age2+age3+age4+age5)) {
return 4;
} else if (i>(age1+age2+age3+age4+age5) && i<(age1+age2+age3+age4+age5+age6)) {
return 5;
} else if (i>(age1+age2+age3+age4+age5+age6) && i<(age1+age2+age3+age4+age5+age6+age7)) {
return 6;
}
});
var colorMap = {
0:"#003366",
1:"#366092",
2:"#4f81b9",
3:"#95b3d7",
4:"#b8cce4",
5:"#e7eef8",
6:"#f6d18b"
};
graphGroup.selectAll('rect')
.data(data1)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i % maxColumn) * 30
})
.attr('y', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 30
})
.attr('width', 20)
.attr('height', 20)
.style('fill', function(d) {
return colorMap[d];
});
//})
<script src="https://d3js.org/d3.v5.min.js"></script>
Question
Does d3 offer something more sublime than my brute force approach to achieve the desired array?

I suppose you want to create a pictogram. If that's correct, this mix of reduce and map can easily create the individual arrays you want, regardless the number of properties in the datum object:
data.forEach(obj => {
modifiedData.push(Object.keys(obj).reduce((acc, _, i) =>
acc.concat(d3.range(Math.round(obj["age" + (i + 1)])).map(() => i)), []))
});
Pay attention to the fact that, since you cannot guarantee the order of the properties in an object, the reduce uses the bracket notation with "age" + index to correctly set the numbers 0, 1, 2, etc.. to age1, age2, age3, etc...
Here is the demo:
const data = [{
'age1': 33.66,
'age2': 14.87,
'age3': 18,
'age4': 14,
'age5': 11,
'age6': 5,
'age7': 3
}];
const modifiedData = [];
data.forEach(obj => {
modifiedData.push(Object.keys(obj).reduce((acc, _, i) =>
acc.concat(d3.range(Math.round(obj["age" + (i + 1)])).map(() => i)), []))
});
console.log(modifiedData)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
By the way, your current data sample does not sum 100.

There are obviously many solutions to your problem. However, since you explicitly asked for a D3 solution, this is my take on it:
// STEPS 1-5:
const data1 = d3.merge( // 5. Merge all sub-array into one.
d3.range(1,8) // 1. For every age group 1-7...
.map(d => d3.range( // 2. create an array...
Math.round(data[0][`age${d}`]) // 3. given a length as per the age property...
).map(() => d-1) // 4. populated with the value from 2.
)
);
Have a look at the following snippet for a working demo:
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
//var tsvData = d3.tsv('so-demo3.tsv');
var maxColumn = 10;
//tsvData.then(function(rawData) {
/*
var data = rawData.map(function(d) {
return {year:+d.year, age3:+d.age3*100, age1:+d.age1*100, age2:+d.age2*100, age4:+d.age4*100, age5:+d.age5*100, age6:+d.age6*100, age7:+d.age7*100}
});
*/
var data = [
{'age1':33.66, 'age2':14.87, 'age3':18, 'age4':14, 'age5':11, 'age6':5, 'age7':3}
];
const data1 = d3.merge( // 5. Merge all sub-array into one.
d3.range(1,8) // 1. For every age group 1-7...
.map(d => d3.range( // 2. create an array...
Math.round(data[0][`age${d}`]) // 3. given a length as per the age property...
).map(() => d-1) // 4. populated with the value from 2.
)
);
var colorMap = {
0:"#003366",
1:"#366092",
2:"#4f81b9",
3:"#95b3d7",
4:"#b8cce4",
5:"#e7eef8",
6:"#f6d18b"
};
graphGroup.selectAll('rect')
.data(data1)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i % maxColumn) * 30
})
.attr('y', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 30
})
.attr('width', 20)
.attr('height', 20)
.style('fill', function(d) {
return colorMap[d];
});
//})
<script src="https://d3js.org/d3.v5.min.js"></script>

Your goal is to represent the single values in the data array as discrete values in an a*a matrix.
So my suggestion (in pseudo-code) would be:
Scale values so the total sum is a*a (in our case 10*10 = 100):
sumAge = age1 + age2
.... data.forEach(age1/sumAge*100)
Now paint the chart:
counter = 0
data.forEach age
ageCounter = 0;
while agecounter < age
ageCounter ++
set color
while counter < 100
counter ++
draw rectangle at x,y
with x = 100 mod a
y = 100 div a
You scale the values - you loop stepwise through each data item (to set the color), and have an inner loop that is executed as often as you need to draw squares.

D3js V4 - How to zoom scatter plot matrix chart

I'm a freshman using js and d3. How can I zoom a scatter plot matrix chart?
What I did,
I used svg to show the scatter plot matrix, following the example https://bl.ocks.org/Fil/6d9de24b31cb870fed2e6178a120b17d
Since the performance was too bad when the records over 10 thousands and the matrix size is 10*10, I changed the point draw with canvas
Axes are using svg and the dots are drew by canvas
Even if it spends some time to draw the chart with canvas, the page will not hang and oom when running 10*10 matrix over 10 thousands records
I'm not sure it's a formal way to do this.
On the other hand, I want to zoom this chart but I have no idea how can I do this.
From my understanding,
The axes splits into several parts according to the number of matrix, such as 10, including x-axis and y-axis
If I want to rescale each matrix cell, such as the cell on row 0 and column 0, how can I do this? I just tired with d3.event.transform.rescaleX/rescaleY to rescale the axes, this seems to work but how can I do on the canvas, how can I get the valid dots to redraw?
On the other hand, if I only want to zoom the whole chart not the single cell(That means, if I click on cell(0,0), this cell will zoom until it fill the whole chart and other cells will not be seen), how can I do this? I used modal to show the scaled large svg by viewBox="0 0 ' + width * scalar + ' ' + height, is there any other way to show image in large format?
draw_spm = function(data) {
var width = 700, traits = d3.keys(data[0]),
domain = {}, n = traits.length,
pointRadius = 1;
var size = width / n,
padding = size / 10;
var x = d3.scaleLinear().range([padding / 2, size - padding / 2]),
y = d3.scaleLinear().range([size - padding / 2, padding / 2]);
var x_axis = d3.axisBottom().scale(x).ticks(6),
y_axis = d3.axisLeft().scale(y).ticks(6);
traits.forEach(function(t) {
domain[t] = d3.extent(data, function(d) { return d[t]; });
});
x_axis.tickSize(size * n);
y_axis.tickSize(-size * n);
var zoom = d3.zoom()
.on('zoom', zoomed);
var svg = d3.select('#spm-svg')
.attr('class', 'plot svg-scatterplot')
.attr('width', size * n + 4*padding)
.attr('height', size * n + 4*padding)
.append('g')
.attr('transform', 'translate('+4*padding+','+padding/2+')');
var x_axis_svg = svg.selectAll('.x.axis')
.data(traits)
.enter().append('g')
.attr('class', 'x axis')
.attr('transform', function(d, i) { return 'translate('+size*i+',0)'; })
.each(function(d) { x.domain(domain[d]); d3.select(this).call(x_axis); });
var y_axis_svg = svg.selectAll('.y.axis')
.data(traits)
.enter().append('g')
.attr('class', 'y axis')
.attr('transform', function(d, i) { return 'translate(0,'+size*i+')'; })
.each(function(d) { y.domain(domain[d]); d3.select(this).call(y_axis); });
var canvas = d3.select('#spm-canvas')
.attr('width', size*n+4*padding)
.attr('height', size*n+4*padding)
.style('transform', 'translate('+4*padding+','+padding/2+')');
var ctx = canvas.node().getContext('2d');
ctx.fillStyle = 'steelblue';
var cell = svg.selectAll('.cell')
.data(cross(traits, traits))
.enter().append('g')
.attr('class', 'cell')
.attr('transform', function(d) {
return 'translate(' + d.i*size + ',' + d.j*size + ')';
})
.each(draw);
canvas.call(zoom).on('dblclick.zoom', null);
function draw(p) {
var cell = d3.select(this);
ctx.resetTransform();
ctx.transform(1, 0, 0, 1, p.i*size+4*padding, p.j*size+padding/2);
x.domain(domain[p.x]);
y.domain(domain[p.y]);
function draw_point(d) {
ctx.beginPath();
ctx.arc(x(d[p.x]), y(d[p.y]), pointRadius, 0, 2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
cell.append('rect')
.attr('class', 'frame')
.attr('x', padding / 2)
.attr('y', padding / 2)
.attr('width', size - padding)
.attr('height', size - padding);
data.forEach(function(d) {
draw_point(d);
});
}
function zoomed() {
// how to do this?
};
function cross(a, b) {
var c = [], n = a.length, m = b.length, i, j;
for (i = -1; ++i < n;)
for (j = -1; ++j < m;)
c.push({x: a[i], i: i, y: b[j], j: j});
return c;
}
};
cols = ['x0','x1','x2','x3','x4'];
function _data() {
var d = {};
for (var i = 0; i < cols.length; i++) {
d[cols[i]] = Math.floor(Math.random() * 10000);
}
return d;
}
var data = [];
for (var i = 0; i < 1000; i++) {
data[i] = _data();
}
draw_spm(data);
.svg-scatterplot .axis,.frame {shape-rendering:crispEdges;}
.svg-scatterplot .axis line {stroke:#ddd;}
.svg-scatterplot .axis path {display:none;}
.svg-scatterplot .cell text {font-weight:bold;text-transform: capitalize;fill: black;}
.svg-scatterplot .frame {fill:none;stroke:#aaa;}
.svg-scatterplot circle {fill-opacity:.7;}
.svg-scatterplot circle.hidden {fill:#ccc !important;}
.svg-scatterplot .extent {fill:#000;fill-opacity:.125;stroke:#fff;}
.plot {position: absolute;}
#spm-canvas {z-index: 2;}
#spm-svg {z-index: 1;}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="spm-svg" class="plot"></svg>
<canvas id="spm-canvas" class="plot"></canvas>
Thanks for your help

How do I draw directed arrows between rectangles of different dimensions in d3?

I would like to draw directed arcs between rectangles (nodes that are represented by rectangles) in such a way that the arrow-tip always hits the edge in a graceful way. I have seen plenty of SO posts on how to do this for circles (nodes represented by circles). Quite interestingly, most d3 examples deal with circles and squares (though squares to a lesser extent).
I have an example code here. Right now my best attempt can only draw from center-point to center-point. I can shift the end point (where the arrow should be), but upon experimenting with dragging the rectangles around, the arcs don't behave as intended.
Here's what I've got.
But I need something like this.
Any ideas on how I can easily do this in d3? Is there some built-in library/function that can help with this type of thing (like with the dragging capabilities)?

A simple algorithm to solve your problem is
when a node is dragged do the following for each of its incoming/outgoing edges
let a be the node dragged and b the node reached through the outgoing/incoming edge
let lineSegment be a line segment between the centers of a and b
compute the intersection point of a and lineSegment, this is done by iterating the 4 segments that make the box and checking the intersection of each of them with lineSegment, let ia be the intersection point of one of the segments of a and lineSegment, find ib in a similar fashion
Corner cases that I have considered but haven't solved
when a box's center is inside the other box there won't be 2 segment intersections
when both intersections points are the same! (solved this one in an edit)
when your graph is a multigraph edges would render on top of each other
plunkr demo
EDIT: added the check ia === ib to avoid creating an edge from the top left corner, you can see this on the plunkr demo
$(document).ready(function() {
var graph = {
nodes: [
{ id: 'n1', x: 10, y: 10, width: 200, height: 200 },
{ id: 'n2', x: 10, y: 270, width: 200, height: 250 },
{ id: 'n3', x: 400, y: 270, width: 200, height: 300 }
],
edges: [
{ start: 'n1', stop: 'n2' },
{ start: 'n2', stop: 'n3' }
],
node: function(id) {
if(!this.nmap) {
this.nmap = { };
for(var i=0; i < this.nodes.length; i++) {
var node = this.nodes[i];
this.nmap[node.id] = node;
}
}
return this.nmap[id];
},
mid: function(id) {
var node = this.node(id);
var x = node.width / 2.0 + node.x,
y = node.height / 2.0 + node.y;
return { x: x, y: y };
}
};
var arcs = d3.select('#mysvg')
.selectAll('line')
.data(graph.edges)
.enter()
.append('line')
.attr({
'data-start': function(d) { return d.start; },
'data-stop': function(d) { return d.stop; },
x1: function(d) { return graph.mid(d.start).x; },
y1: function(d) { return graph.mid(d.start).y; },
x2: function(d) { return graph.mid(d.stop).x; },
y2: function(d) { return graph.mid(d.stop).y },
style: 'stroke:rgb(255,0,0);stroke-width:2',
'marker-end': 'url(#arrow)'
});
var g = d3.select('#mysvg')
.selectAll('g')
.data(graph.nodes)
.enter()
.append('g')
.attr({
id: function(d) { return d.id; },
transform: function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
}
});
g.append('rect')
.attr({
id: function(d) { return d.id; },
x: 0,
y: 0,
style: 'stroke:#000000; fill:none;',
width: function(d) { return d.width; },
height: function(d) { return d.height; },
'pointer-events': 'visible'
});
function Point(x, y) {
if (!(this instanceof Point)) {
return new Point(x, y)
}
this.x = x
this.y = y
}
Point.add = function (a, b) {
return Point(a.x + b.x, a.y + b.y)
}
Point.sub = function (a, b) {
return Point(a.x - b.x, a.y - b.y)
}
Point.cross = function (a, b) {
return a.x * b.y - a.y * b.x;
}
Point.scale = function (a, k) {
return Point(a.x * k, a.y * k)
}
Point.unit = function (a) {
return Point.scale(a, 1 / Point.norm(a))
}
Point.norm = function (a) {
return Math.sqrt(a.x * a.x + a.y * a.y)
}
Point.neg = function (a) {
return Point(-a.x, -a.y)
}
function pointInSegment(s, p) {
var a = s[0]
var b = s[1]
return Math.abs(Point.cross(Point.sub(p, a), Point.sub(b, a))) < 1e-6 &&
Math.min(a.x, b.x) <= p.x && p.x <= Math.max(a.x, b.x) &&
Math.min(a.y, b.y) <= p.y && p.y <= Math.max(a.y, b.y)
}
function lineLineIntersection(s1, s2) {
var a = s1[0]
var b = s1[1]
var c = s2[0]
var d = s2[1]
var v1 = Point.sub(b, a)
var v2 = Point.sub(d, c)
//if (Math.abs(Point.cross(v1, v2)) < 1e-6) {
// // collinear
// return null
//}
var kNum = Point.cross(
Point.sub(c, a),
Point.sub(d, c)
)
var kDen = Point.cross(
Point.sub(b, a),
Point.sub(d, c)
)
var ip = Point.add(
a,
Point.scale(
Point.sub(b, a),
Math.abs(kNum / kDen)
)
)
return ip
}
function segmentSegmentIntersection(s1, s2) {
var ip = lineLineIntersection(s1, s2)
if (ip && pointInSegment(s1, ip) && pointInSegment(s2, ip)) {
return ip
}
}
function boxSegmentIntersection(box, lineSegment) {
var data = box.data()[0]
var topLeft = Point(data.x, data.y)
var topRight = Point(data.x + data.width, data.y)
var botLeft = Point(data.x, data.y + data.height)
var botRight = Point(data.x + data.width, data.y + data.height)
var boxSegments = [
// top
[topLeft, topRight],
// bot
[botLeft, botRight],
// left
[topLeft, botLeft],
// right
[topRight, botRight]
]
var ip
for (var i = 0; !ip && i < 4; i += 1) {
ip = segmentSegmentIntersection(boxSegments[i], lineSegment)
}
return ip
}
function boxCenter(a) {
var data = a.data()[0]
return Point(
data.x + data.width / 2,
data.y + data.height / 2
)
}
function buildSegmentThroughCenters(a, b) {
return [boxCenter(a), boxCenter(b)]
}
// should return {x1, y1, x2, y2}
function getIntersection(a, b) {
var segment = buildSegmentThroughCenters(a, b)
console.log(segment[0], segment[1])
var ia = boxSegmentIntersection(a, segment)
var ib = boxSegmentIntersection(b, segment)
if (ia && ib) {
// problem: the arrows are drawn after the intersection with the box
// solution: move the arrow toward the other end
var unitV = Point.unit(Point.sub(ib, ia))
// k = the width of the marker
var k = 18
ib = Point.sub(ib, Point.scale(unitV, k))
return {
x1: ia.x,
y1: ia.y,
x2: ib.x,
y2: ib.y
}
}
}
var drag = d3.behavior.drag()
.origin(function(d) {
return d;
})
.on('dragstart', function(e) {
d3.event.sourceEvent.stopPropagation();
})
.on('drag', function(e) {
e.x = d3.event.x;
e.y = d3.event.y;
var id = 'g#' + e.id
var target = d3.select(id)
target.data().x = e.x
target.data().y = e.y
target.attr({
transform: 'translate(' + e.x + ',' + e.y + ')'
});
d3.selectAll('line[data-start=' + e.id + ']')
.each(function (d) {
var line = d3.select(this)
var other = d3.select('g#' + line.attr('data-stop'))
var intersection = getIntersection(target, other)
intersection && line.attr(intersection)
})
d3.selectAll('line[data-stop=' + e.id + ']')
.each(function (d) {
var line = d3.select(this)
var other = d3.select('g#' + line.attr('data-start'))
var intersection = getIntersection(other, target)
intersection && line.attr(intersection)
})
})
.on('dragend', function(e) {
});
g.call(drag);
})
svg#mysvg { border: 1px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="mysvg" width="800" height="800">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
</svg>

Here's the result: https://jsfiddle.net/he0f4u23/2/
For source arrows I just filled rectangles with white to paint the arrow.
For target it is a little bit more trickier than you think. You have to calculate source and target rectangles positions and draw your arrow accordingly.
I've made a tarmid function with addition to you mid function. Your mid function calculates the arrows source point which is fine. But for target point I used the tarmid function which is:
tarmid: function(d) {
var startnode = this.node(d.start);
var endnode = this.node(d.stop);
if(startnode.x == endnode.x && startnode.y <= endnode.y){
var x = endnode.width / 2.0 + endnode.x,
y = endnode.y -17;
}else if(startnode.x < endnode.x && startnode.y <= endnode.y){
var x = endnode.x-17,
y = endnode.y + startnode.height / 2.0;
}
return { x: x, y: y };
}
see how I calculated the target point according to the rectangle placement.
Also notice that these two are not the only cases for all rectangle placement and you must update your function accordingly so I'm leaving the rest to you.

javascript x3dom insert via ajax

I am trying to insert a x3d object via ajax callback but the object doesn't appear. I copied the source code of the page then placed it on a new page then the x3d object showed. Am I missing something here? Is there a work around for this? thanks.
html:
<div id="divPlot" style="border: 1px solid black"></div>
<button onclick="add_x3d()">Click</button>
<script>
d3.select('html').style('height','100%').style('width','100%');
d3.select('body').style('height','100%').style('width','100%');
d3.select('#divPlot').style('width', "450px").style('height', "450px");
function add_x3d() {
scatterPlot3d(d3.select('#divPlot'));
}
</script>
javascript:
function scatterPlot3d(parent){
var rows = [
{"SITE":"1","SIGNAME":"A","X":10,"Y":10,"Z":111},
{"SITE":"1","SIGNAME":"B","X":200,"Y":10,"Z":222},
{"SITE":"2","SIGNAME":"A","X":10,"Y":40,"Z":333},
{"SITE":"2","SIGNAME":"B","X":200,"Y":40,"Z":444},
{"SITE":"3","SIGNAME":"A","X":10,"Y":70,"Z":555},
{"SITE":"3","SIGNAME":"B","X":200,"Y":70,"Z":666},
{"SITE":"4","SIGNAME":"A","X":10,"Y":100,"Z":777},
{"SITE":"4","SIGNAME":"B","X":200,"Y":100,"Z":888}
];
var x3d = parent
.append("x3d")
.style("width", parseInt(parent.style("width")) + "px")
.style("height", parseInt(parent.style("height")) + "px")
.style("border", "none");
var scene = x3d.append("scene");
scene.append("orthoviewpoint")
.attr("centerOfRotation", [5, 5, 5])
.attr("fieldOfView", [-5, -5, 15, 15])
.attr("orientation", [-0.5, 1, 0.2, 1.12 * Math.PI / 4])
.attr("position", [8, 4, 15]);
// Used to make 2d elements visible
function makeSolid(selection, color) {
selection.append("appearance")
.append("material")
.attr("diffuseColor", color || "black");
return selection;
}
function constVecWithAxisValue(otherValue, axisValue, axisIndex) {
var result = [otherValue, otherValue, otherValue];
result[axisIndex] = axisValue;
return result;
}
var XAxisMin = d3.min(rows, function(d){return d.X;});
var XAxisMax = d3.max(rows, function(d){return d.X;});
var XAxisDel = XAxisMax-XAxisMin;
var YAxisMin = d3.min(rows, function(d){return d.Y;});
var YAxisMax = d3.max(rows, function(d){return d.Y;});
var YAxisDel = YAxisMax-YAxisMin;
var ZAxisMin = d3.min(rows, function(d){return d.Z;});
var ZAxisMax = d3.max(rows, function(d){return d.Z;});
var ZAxisDel = ZAxisMax-ZAxisMin;
function AxisMin(axisIndex) {
return [XAxisMin, ZAxisMin, YAxisMin][axisIndex];
}
function AxisMax(axisIndex) {
return [XAxisMax, ZAxisMax, YAxisMax][axisIndex];
}
function AxisDel(axisIndex) {
return [XAxisDel, ZAxisDel, YAxisDel][axisIndex];
}
function axisName(name, axisIndex) {
return AxisKeys[axisIndex] + name;
}
function get2DVal(){
if (XAxisDel >= YAxisDel){
return XAxisDel;
} else {
return YAxisDel;
}
}
function ConvAxisRange(inputVal, axisIndex) {
var val;
if (axisIndex === 0 || axisIndex === 2) {
val = d3.scale.linear()
.domain([0, delta2D])
.range(AxisRange);
} else {
val = d3.scale.linear()
.domain([0, ZAxisDel])
.range(AxisRange);
}
return val(inputVal);
}
function ConvAxisRange2D(inputVal) {
var val = d3.scale.linear()
.domain([0, delta2D])
.range(AxisRange);
return val(inputVal);
}
var AxisKeys = ["X", "HEIGHT", "Y"];
var AxisRange = [0, 10];
var scales = [];
var AxisLen;
var duration = 300;
var delta2D = get2DVal();
var ArrayOfColors = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
var colorScale = d3.scale.linear()
.domain([0, ZAxisDel*0.25, ZAxisDel*0.50, ZAxisDel*0.75, ZAxisDel])
.range(ArrayOfColors);
function initializeAxis(axisIndex) {
var key = AxisKeys[axisIndex];
drawAxis(axisIndex, key, duration);
var scaleDel = AxisDel(axisIndex);
var rotation = [[0, 0, 0, 0], [0, 0, 1, Math.PI / 2], [0, 1, 0, -Math.PI / 2]];
var newAxisLine = scene.append("transform")
.attr("class", axisName("Axis", axisIndex))
.attr("rotation", (rotation[axisIndex]))
.append("shape");
newAxisLine
.append("appearance")
.append("material")
.attr("emissiveColor", "lightgray");
newAxisLine
.append("polyline2d")
// Line drawn along y axis does not render in Firefox, so draw one
// along the x axis instead and rotate it (above).
.attr("lineSegments", "[" + ConvAxisRange(scaleDel, axisIndex) + " 0, 0 0]");
// axis labels
var newAxisLabel = scene.append("transform")
.attr("class", axisName("AxisLabel", axisIndex))
.attr("translation", constVecWithAxisValue(0, ConvAxisRange(scaleDel*1.15, axisIndex), axisIndex));
var newAxisLabelShape = newAxisLabel
.append("billboard")
.attr("axisOfRotation", "0 0 0") // face viewer
.append("shape")
.call(makeSolid);
var labelFontSize = 0.6;
newAxisLabelShape
.append("text")
.attr("class", axisName("AxisLabelText", axisIndex))
.attr("solid", "true")
.attr("string", key)
.append("fontstyle")
.attr("size", labelFontSize)
.attr("family", "SANS")
.attr("justify", "END MIDDLE");
}
// Assign key to axis, creating or updating its ticks, grid lines, and labels.
function drawAxis(axisIndex, key, duration) {
var scale;
if (axisIndex === 0 || axisIndex === 2) {
scale = d3.scale.linear()
.domain([AxisMin(axisIndex), AxisMax(axisIndex)]) // demo data range
.range([0, ConvAxisRange2D(AxisDel(axisIndex))]);
} else {
scale = d3.scale.linear()
.domain([AxisMin(axisIndex), AxisMax(axisIndex)]) // demo data range
.range(AxisRange);
}
scales[axisIndex] = scale;
var numTicks = 5;
var tickSize = 0.1;
var tickFontSize = 0.5;
// ticks along each axis
var ticks = scene.selectAll("." + axisName("Tick", axisIndex))
.data(scale.ticks(numTicks));
var newTicks = ticks.enter()
.append("transform")
.attr("class", axisName("Tick", axisIndex));
newTicks.append("shape").call(makeSolid)
.append("box")
.attr("size", tickSize + " " + tickSize + " " + tickSize);
// enter + update
ticks.transition().duration(duration)
.attr("translation", function(tick) {
return constVecWithAxisValue(0, scale(tick), axisIndex);
});
ticks.exit().remove();
// tick labels
var tickLabels = ticks.selectAll("billboard shape text")
.data(function(d) {
return [d];
});
var newTickLabels = tickLabels.enter()
.append("billboard")
.attr("axisOfRotation", "0 0 0")
.append("shape")
.call(makeSolid);
newTickLabels.append("text")
.attr("string", scale.tickFormat(10))
.attr("solid", "true")
.append("fontstyle")
.attr("size", tickFontSize)
.attr("family", "SANS")
.attr("justify", "END MIDDLE");
tickLabels // enter + update
.attr("string", scale.tickFormat(10));
tickLabels.exit().remove();
}
function plotData() {
if (!rows) {
console.log("no rows to plot.");
return;
}
var x = scales[0], z = scales[1], y = scales[2];
var sphereRadius = 0.2;
// Draw a sphere at each x,y,z coordinate.
var datapoints = scene.selectAll(".datapoint").data(rows);
datapoints.exit().remove();
var newDatapoints = datapoints.enter()
.append("transform")
.attr("class", "datapoint")
.attr("scale", [sphereRadius, sphereRadius, sphereRadius])
.append("shape");
newDatapoints
.append("appearance")
.append("material");
newDatapoints
.append("sphere");
// Does not work on Chrome; use transform instead
//.attr("radius", sphereRadius)
datapoints.selectAll("shape appearance material")
.attr("diffuseColor", function(row){
return colorScale(row.Z-ZAxisMin);
});
datapoints.attr("translation", function(row) {
return x(row.X) + " " + z(row.Z) + " " + y(row.Y);
});
}
function initializePlot() {
initializeAxis(0);
initializeAxis(1);
initializeAxis(2);
}
initializePlot();
}

You cannot add the whole x3d element and a scene dynamically per se since x3dom is initialized with an window.onload event. This should be part of your HTML document beforehand. Then you can add the elements (views, shapes etc) to the scene.
But I heard sometime ago something about a reload function (https://github.com/x3dom/x3dom/blob/1.7.1/src/Main.js#L327) in the mailing list, sadly this is not well documented:
/** Initializes an <x3d> root element that was added after document load. */
x3dom.reload = function() {
onload();
};
This should be doing what you want.

d3.js time series infinite scroll

I am working on a time series line chart that lets the user scroll back from the present. I can find tutorials on real-time d3.js charts, I can find tutorials on zooming and panning, and I can find tutorials on using external data sources. I'm having trouble putting all this knowledge together.
Here is the behavior that I am looking for:
The chart can pan backward in time (meaning that the lines, data points, and axes move with dragging of the mouse or finger)
Panning should only effect the x-axis, and no zooming should occur.
As the user pans the chart, more data loads in, giving an experience of infinite scrolling
I plan on buffering in at least one extra "page" worth of data for the user to scroll into (already got this part figured out)
I don't think I need transitions, because the panning of the chart will already smoothly translate it
This is what I have working so far:
// set up a zoom handler only for panning
// by limiting the scaleExtent
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 1])
.on("zoom", pan);
var loadedPage = 1; // begin with one page of data loaded
var nextPage = 2; // next page will be page 2
var panX = 0;
function pan()
{
if (d3.event)
{
panX = d3.event ? d3.event.translate[0] : 0;
// is there a better way to determine when
// to load the next page?
nextPage = panX / (width + margin.left + margin.right) + 2;
nextPage = Math.floor(nextPage);
// if we haven't loaded in the next page's data
// load it in so that the user can scroll into it
if (nextPage > loadedPage) {
console.log("Load a new page");
loadedPage += 1;
// load more data
Chart.query( /*params will be here*/ ).then(
function(response) {
// append the new data onto the front of the array
data = data.concat(response);
console.log(data.length);
// I need to add the new data into the line chart
// but how do I make that work with the pan
// logic from zoom?
}
);
}
// is this where I update the axes and scroll the chart?
// What's the best way to do that?
}
}
In this code, I can know when to pull more data from the server, but I'm not sure how to insert the data into the chart in a way that works with the pan offset. Do I use transform translate, or can I update the d value of the path of my line?
Any suggestions would be welcome... also, if anyone knows of any demos which already show panning infinitely through time series data, that would be much appreciated.

As mentioned in the other answer, I know this is a very old post but hopefully the following will help someone...
I made a pen that I think hits all the requirements mentioned. As I didn't have a real API to use, I created some data using a json-generator (great tool), included it, and sorted it in descending order. Then I use the built in slice and concat methods to take bits of the array, data, and add to the chart_data variable (similarly to how one might use an api).
Important Sections:
Once you've created your scales, axes, and points (lines, bars, etc.), you need to create the zoom behavior. As mentioned in the question, keeping the scaleExtent limited to the same number on both sides prevents zooming:
var pan = d3.behavior.zoom()
.x(x_scale)
.scale(scale)
.size([width, height])
.scaleExtent([scale, scale])
.on('zoom', function(e) { ... });
Now that we've created the behavior, we need to call it. I'm also calculating what the x translation will be for this moment in time, now, and programmatically panning there:
// Apply the behavior
viz.call(pan);
// Now that we've scaled in, find the farthest point that
// we'll allow users to pan forward in time (to the right)
max_translate_x = width - x_scale(new Date(now));
viz.call(pan.translate([max_translate_x, 0]).event);
Both preventing the user from scrolling past now and loading more data is all done in the zoom event handler:
...
.scaleExtent([scale, scale])
.on('zoom', function(e) {
var current_domain = x_scale.domain(),
current_max = current_domain[1].getTime();
// If we go past the max (i.e. now), reset translate to the max
if (current_max > now)
pan.translate([max_translate_x, 0]);
// Update the data & points once user hits the point where current data ends
if (pan.translate()[0] > min_translate_x) {
updateData();
addNewPoints();
}
// Redraw any components defined by the x axis
x_axis.call(x_axis_generator);
circles.attr('cx', function(d) {
return x_scale(new Date(d.registered));
});
});
The other functions are pretty straightforward and can be found at the bottom of the pen. I'm not aware of any built in D3 function to prevent panning past the present but I'm definitely open to feedback if I've missed an easier way to do some of this.
Let me know if you have trouble viewing the pen or need clarification on something. If I have time I'll update this with another version demoing an infinite scrolling line chart.
P.S. In the pen, I'm consoling out the selection and data as they update. I suggest opening the console to see exactly what's happening.

This is too late, but answering just in case somebody needs again. I was having most of the code ready for my scatterplot so uploading that. Hope it helps you. The code is created as a trial when I was learning this features. So please check before you use.
Note:
D3js panning implemented with zoom behavior,
zooming disabled with scaleExtent,
Y panning restricted.
Data loaded when x extremes are reached.
Please check the Plunkr link
// Code goes here
window.chartBuilder = {};
(function(ns) {
function getMargin() {
var margin = {
top: 20,
right: 15,
bottom: 60,
left: 60
};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
return {
margin: margin,
width: width,
height: height
};
}
function getData() {
var data = [
[5, 3],
[10, 17],
[15, 4],
[2, 8]
];
return data;
}
//function defineScales(data, width, height) {
// var x = d3.scale.linear()
// .domain([0, d3.max(data, function (d) {
// return d[0];
// })])
// .range([0, width]);
//
// var y = d3.scale.linear()
// .domain([0, d3.max(data, function (d) {
// return d[1];
// })])
// .range([height, 0]);
// return {x: x, y: y};
//}
function defineYScale(data, domain, range) {
var domainArr = domain;
if (!domain || domain.length == 0) {
domainArr = [0, d3.max(data, function(d) {
return d[1];
})];
}
var y = d3.scale.linear()
.domain(domainArr)
.range(range);
return y;
}
function defineXScale(data, domain, range) {
var domainArr = domain;
if (!domain || domain.length == 0) {
domainArr = [d3.min(data, function(d) {
return d[0];
}), d3.max(data, function(d) {
return d[0];
})];
}
var x = d3.scale.linear()
.domain(domainArr)
.range(range);
return x;
}
function getSvg(width, margin, height) {
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart');
return chart;
}
function getContainerGroup(chart, margin, width, height) {
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main');
return main;
}
function renderXAxis(x, main, height) {
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var xAxisElement = main.select('.x.axis');
if (xAxisElement.empty()) {
xAxisElement = main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'x axis')
}
xAxisElement.call(xAxis);
return xAxis;
}
function renderYAxis(y, main) {
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var yAxisElement = main.select('.y.axis');
if (yAxisElement.empty()) {
yAxisElement = main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'y axis');
}
yAxisElement.call(yAxis);
return yAxis;
}
function renderScatterplot(main, data, scales) {
var g = main.append("svg:g");
var divTooltip = d3.select('.tooltip1');
if (divTooltip.empty()) {
divTooltip = d3.select('body').append('div')
.attr('class', 'tooltip1')
.style('opacity', 0);
}
g.selectAll("scatter-dots")
.data(data, function(d, i) {
return i;
})
.enter().append("svg:circle")
.attr("cx", function(d, i) {
return scales.x(d[0]);
})
.attr("cy", function(d) {
return scales.y(d[1]);
})
.on('click', function(d) {
// log(d.toString());
})
.attr("r", 8);
}
function addZoomRect(main, scales, zoom) {
var zoomRect = main.append('rect')
.attr('width', function() {
return scales.x(d3.max(scales.x.domain()));
})
.attr('height', function() {
return scales.y(d3.min(scales.y.domain()));
})
.attr('x', 0)
.attr('y', 0)
.attr('fill', 'transparent')
.attr('stroke', 'red');
if (zoom) {
zoomRect.call(zoom);
}
return zoomRect;
}
function restrictYPanning(zoom) {
var zoomTranslate = this.translate();
this.translate([zoomTranslate[0], 0]);
}
function addXScrollEndEvent(scales, direction, data) {
var zoomTranslate = this.translate();
var condition;
var currentDomainMax = d3.max(scales.x.domain());
var dataMax = d3.max(data, function(d) {
return d[0];
});
var currentDomainMin = d3.min(scales.x.domain());
var dataMin =
d3.min(data, function(d) {
return d[0];
});
if (currentDomainMax > dataMax && direction === 'right') {
//log('currentDomainMax ', currentDomainMax);
//log('dataMax ', dataMax);
//log('----------------');
condition = true;
}
if (dataMin > currentDomainMin && direction === 'left') {
//log('currentDomainMin ', currentDomainMin);
//log('dataMin ', dataMin);
//log('----------------');
condition = true;
}
//var xRightLimit, xTranslate;
//if (direction === 'right') {
// xRightLimit = scales.x(d3.max(scales.x.domain())) - (getMargin().width + 60);
//
// xTranslate = 0 - zoomTranslate[0];// + scales.x(d3.min(scales.x.domain()));
//
// condition = xTranslate > xRightLimit;
//} else {
// xRightLimit = scales.x(d3.min(scales.x.domain()));
//
// xTranslate = zoomTranslate[0];// + scales.x(d3.min(scales.x.domain()));
//
// condition = xTranslate > xRightLimit;
//}
return condition;
}
function onZoom(zoom, main, xAxis, yAxis, scales, data) {
//var xAxis = d3.svg.axis()
// .scale(scales.x)
// .orient('bottom');
//var yAxis = d3.svg.axis()
// .scale(scales.y)
// .orient('left');
//alert(data);
var translate = zoom.translate();
var direction = '';
if (translate[0] < ns.lastTranslate[0]) {
direction = 'right';
} else {
direction = 'left';
}
ns.lastTranslate = translate; //d3.transform(main.attr('transform')).translate ;
// log('zoom translate', ns.lastTranslate);
// log('d3 Event translate', d3.event.translate);
window.scales = scales;
window.data = data;
// ns.lastTranslate = translate;
var divTooltip = d3.select('.tooltip1');
if (divTooltip.empty()) {
divTooltip = d3.select('body').append('div')
.attr('class', 'tooltip1')
.style('opacity', 0);
}
restrictYPanning.call(zoom);
var xScrollEndCondition = addXScrollEndEvent.call(zoom, scales, direction, data);
if (xScrollEndCondition) {
if (zoom.onXScrollEnd) {
zoom.onXScrollEnd.call(this, {
'translate': translate,
'direction': direction
});
}
}
main.select(".x.axis").call(xAxis);
main.select(".y.axis").call(yAxis);
var dataElements = main.selectAll("circle")
.data(data, function(d, i) {
return i;
});
dataElements.attr("cx", function(d, i) {
return scales.x(d[0]);
})
.attr("cy", function(d) {
return scales.y(d[1]);
}).attr("r", 8);
dataElements.enter().append("svg:circle")
.attr("cx", function(d, i) {
return scales.x(d[0]);
})
.attr("cy", function(d) {
return scales.y(d[1]);
}).on('click', function(d) {
// log(d.toString());
})
.attr("r", 8);
// log(direction);
}
//var xRangeMax;
//var xRangeMin;
ns.lastTranslate = [0, 0];
/**
* Created by Lenovo on 7/4/2015.
*/
function log(titlee, msgg) {
var msg = msgg;
var title;
if (titlee) {
title = titlee + ':-->';
}
if (!msgg) {
msg = titlee;
title = '';
} else {
if (Array.isArray(msgg)) {
msg = msgg.toString();
}
if ((typeof msg === "object") && (msg !== null)) {
msg = JSON.stringify(msg);
}
}
var tooltip = d3.select('.tooltip1');
var earlierMsg = tooltip.html();
var num = tooltip.attr('data-serial') || 0;
num = parseInt(num) + 1;
msg = '<div style="border-bottom:solid 1px green"><span style="color:white">' + num + ')</span><strong>' + title + '</strong> ' + decodeURIComponent(msg) + ' </div>';
tooltip.html('<br>' + msg + '<br>' + earlierMsg).style({
'color': 'lightGray',
'background': 'darkGray',
'font-family': 'courier',
'opacity': 1,
'max-height': '200px',
'overflow': 'auto'
})
.attr('data-serial', num);
}
function addLoggerDiv() {
var divTooltip = d3.select('.tooltip1');
if (divTooltip.empty()) {
divTooltip = d3.select('body').append('div')
.attr('class', 'tooltip1')
.style({
'opacity': 0,
'position': 'relative'
});
d3.select('body').append('div')
.text('close')
.style({
'top': 0,
'right': 0,
'position': 'absolute',
'background': 'red',
'color': 'white',
'cursor': 'pointer'
})
.on('click', function() {
var thisItem = divTooltip;
var txt = thisItem.text();
var display = 'none';
if (txt === 'close') {
thisItem.text('open');
display = 'none';
} else {
thisItem.text('close');
display = 'block';
}
devTooltip.style('display', display);
});
d3.select('body').append('div')
.text('clear')
.style({
'top': 0,
'right': 20,
'position': 'absolute',
'background': 'red',
'color': 'white',
'cursor': 'pointer'
})
.on('click', function() {
divTooltip.html('');
divTooltip.attr('data-serial', '0');
});
}
}
$(document).ready(function() {
var data = getData();
var __ret = getMargin();
var margin = __ret.margin;
var width = __ret.width;
var height = __ret.height;
var scales = {};
var xRangeMax = width;
scales.x = defineXScale(data, [], [0, xRangeMax]);
scales.y = defineYScale(data, [], [height, 0]);
addLoggerDiv();
var svg = getSvg(width, margin, height);
var main = getContainerGroup(svg, margin, width, height);
// draw the x axis
var xAxis = renderXAxis(scales.x, main, height);
// draw the y axis
var yAxis = renderYAxis(scales.y, main);
var thisobj = this;
var zoom = d3.behavior.zoom().x(scales.x).y(scales.y).scaleExtent([1, 1]).on('zoom', function() {
onZoom.call(null, zoom, main, xAxis, yAxis, scales, data);
});
zoom.onXScrollEnd = function(e) {
var maxX = d3.max(data, function(d) {
return d[0];
});
var minX = d3.min(data, function(d) {
return d[0];
});
var incrementX = Math.floor((Math.random() * 3) + 1);
var maxY = d3.max(data, function(d) {
return d[1];
})
var minY = d3.min(data, function(d) {
return d[1];
})
var incrementY = Math.floor((Math.random() * 1) + 16);
var xRangeMin1, xRangeMax1, dataPoint;
if (e.direction === 'left') {
incrementX = incrementX * -1;
dataPoint = minX + incrementX;
// log('dataPoint ', dataPoint);
//xRangeMin1 = d3.min(scales.x.range()) - Math.abs(scales.x(minX) - scales.x(dataPoint));
xRangeMin1 = scales.x(dataPoint);
xRangeMax1 = d3.max(scales.x.range());
} else {
dataPoint = maxX + incrementX;
// log('dataPoint ', dataPoint);
//xRangeMax1 = d3.max(scales.x.range()) + (scales.x(dataPoint) - scales.x(maxX));
xRangeMax1 = d3.max(scales.x.range()) + 20; //scales.x(dataPoint);
xRangeMin1 = d3.min(scales.x.range()) //e.translate[0];
}
data.push([dataPoint, incrementY]);
//scales = defineScales(data, width + incrementX, height );
// scales.x = defineXScale(data, [], [xRangeMin1, xRangeMax1]);
// scales.y = defineYScale(data, [], [height, 0]);
scales.x.domain(d3.extent(data, function(d) {
return d[0];
}));
x = scales.x;
y = scales.y;
xAxis = renderXAxis(scales.x, main, height);
// draw the y axis
yAxis = renderYAxis(scales.y, main);
zoom.x(scales.x).y(scales.y);
}
var zoomRect = addZoomRect(main, scales, zoom);
renderScatterplot(main, data, scales);
});
})(window.chartBuilder);
/* Styles go here */
.chart {
font-family: Arial, sans-serif;
font-size: 10px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I have created zoom.onXScrollEnd function to add new points to data.
Hope it helps.

Develop Reference

JavaScript is the programming language of the Web.

D3 - Update bar chart per 2 seconds - javascript

Related

Transform parsed percentage data into new array

D3js V4 - How to zoom scatter plot matrix chart

How do I draw directed arrows between rectangles of different dimensions in d3?

javascript x3dom insert via ajax

d3.js time series infinite scroll

Categories

Resources