d3.js : very simple mouse interaction

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

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 //

Answer 2

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 3

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/