d3.js : very simple mouse interaction - charts

Question

I wan't to do a very simple chart with mouse interaction.
Example (work in progress) is on this page : http://velo70.ouvaton.org/2013/gpxvtt-un-nouveau-plugin/
The goal is : when you change the slider position, a circle have the same position on the chart. On the map, it's already done :)
The best issue could be : when you move the slide, the circle-chart move, and when you move the circle on the chart, the slide move too... But maybe too hard for me :\
Any link with tutorial to progress with that ?
Thanks.

Answer 1

One way is to bind circles to every data point in your graph and then set the display: none to all but the one that corresponds to your active slider position.
Add the circles after you append path.lineSup:
chart.selectAll("circle.highlightPoint")
.data(data)
.enter()
.append("circle")
.attr("class", "highlightPoint")
.attr("fill", "pink")
.attr("cx", function(d) { return x(d.dist); })
.attr("cy", function(d) { return y(d.ele); })
.attr("display", "none");
Add to your slider function:
d3.selectAll("circle.highlightPoint")
.attr("display", function(d,i) { return i == id ? "block" : "none"});
I think that should work.

Answer 2

Thanks. Good and pedagogic way for me :)
I finally test with
chart.append("circle")
.data(data)
.attr("class", "highlightPoint")
.attr("r",4)
.attr("innerRadius",0)
.style("fill", "pink")
.style("stroke","blue")
.style("stroke-width",1)
.attr("cx", function(d) { return x(d.dist); })
.attr("cy", function(d) { return y(d.ele); })
.attr("display","block") ;
But it display only the first circle.
I don't really understand the function(d) and function(d,i) use :\
Test in http://velo70.ouvaton.org/2013/gpxvtt-un-nouveau-plugin/

Answer 3

It's a little late.. but i need participation points.. :)
For simple handle click mouse and call function on event, I give you a complete file to link with simple function for d3.js..
<script src="js/file.js"></script>
And "THE" File to include ( mainly analyse it for 'on') :
$(function() {
// Handler for .ready() called.
var data = [],
width = 300,
height = 300,
// An array to hold the coordinates
// of the line drawn on each svg.
coords = [],
line = d3.svg.line(),
// Set the behavior for each part
// of the drag.
drag = d3.behavior.drag()
.on("dragstart", function() {
// Empty the coords array.
coords = [];
svg = d3.select(this);
// If a selection line already exists,
// remove it.
//svg.select(".selection").remove();
// Add a new selection line.
svg.append("path").attr({"class": "selection"});
})
.on("drag", function() {
// Store the mouse's current position
coords.push(d3.mouse(this));
svg = d3.select(this);
// Change the path of the selection line
// to represent the area where the mouse
// has been dragged.
svg.select(".selection").attr({
d: line(coords)
});
// Figure out which dots are inside the
// drawn path and highlight them.
selected = [];
svg.selectAll("circle.dot").each(function(d, i) {
point = [d3.select(this).attr("cx"), d3.select(this).attr("cy")];
if (pointInPolygon(point, coords)) {
selected.push(d.id);
}
});
highlight(selected);
})
.on("dragend", function() {
svg = d3.select(this);
// If the user clicks without having
// drawn a path, remove any paths
// that were drawn previously.
if (coords.length === 0) {
// d3.selectAll("svg path").remove();
unhighlight();
return;
}
// Draw a path between the first point
// and the last point, to close the path.
svg.append("line").attr({
"class": "terminator",
d: line([coords[0], coords[coords.length-1]])
});
});
function randomPoint() {
return Math.floor(Math.random()*(width-30)) + 20;
}
// from https://github.com/substack/point-in-polygon
function pointInPolygon (point, vs) {
var xi, xj, i, intersect,
x = point[0],
y = point[1],
inside = false;
for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
xi = vs[i][0],
yi = vs[i][1],
xj = vs[j][0],
yj = vs[j][1],
intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
}
function unhighlight() {
d3.selectAll("circle.dot").classed("highlighted", false);
}
function highlight(ids) {
// First unhighlight all the circles.
unhighlight();
// Find the circles that have an id
// in the array of ids given, and
// highlight those.
d3.selectAll("circle.dot").filter(function(d, i) {
return ids.indexOf(d.id) > -1;
})
.classed("highlighted", true);
}
function Scatter(data, selector, group) {
var svg = d3.select(selector).append("svg")
.attr({
width: width,
height: height
}).call(drag),
g = svg.append("g").attr({"class": "g-dot"}),
// Create a circle element for each
// item in the data passed.
dot = g.selectAll("circle.dot")
.data(data)
.enter().append("circle")
.attr({
"class": "dot",
r: 8,
cx: function(d, i) {
return d[group].x;
},
cy: function(d, i) {
return d[group].y;
},
})
.on("mouseover", function(d, i) {
// Highlight circles on mouseover, but
// only if a path hasn't been drawn.
if (d3.selectAll("svg path").empty()) {
highlight([d.id]);
}
})
.on("mouseout", function(d, i) {
// If a path hasn't been drawn,
// unhighlight the highlighted circles.
if (d3.selectAll("svg path").empty()) {
unhighlight();
}
});
text = g.selectAll("text")
.data(data)
.enter().append("text")
.attr({
x: function(d, i) {
return d[group].x;
},
y: function(d, i) {
return d[group].y + 4;
}
})
.text(function(d, i) {
return d.id;
});
}
// Add the dots to each canvas div.
Scatter(data, "#tableau_principal", "a");
Scatter(data, "#canvas2", "b");
Scatter(data, "#canvas3", "c");
}); // // FIN DOC READY //
// functions generales used partt //