0

I'm trying to create an Interactive Streamgraph that uses tooltips at certain points like this. Some of the data points have text in them, and that is where I'm drawing the circles and displaying the data when I hover over the circles.

How do I get the circles to appear for each element in all the layers that has text in it in it's corresponding location? Most of the code is the same as the first graph, with the code below as a slight modification.

Also the data.csv file found at the bottom of the first graph's page has an extra column called 'meta'. Most entries have "---" in meta, but some have actual text. Those are the ones I want to display and be able to hover over for the information.

svg.selectAll(".layer")
    .on("mousemove", function(d, i) {
      mousex = d3.mouse(this);
      mousex = mousex[0];
      var invertedx = x.invert(mousex);
      invertedx = invertedx.getFullYear();
      var selected = d.values;
      for (var k = 0; k < selected.length; k++) {
        datearray[k] = selected[k].date
        datearray[k] = datearray[k].getFullYear();
      }

      mousedate = datearray.indexOf(invertedx);
      pro = d.values[mousedate].value;
      meta = d.values[mousedate].meta;

      d3.select(this)
      .classed("hover", true)
      .attr("stroke", strokecolor)
      .attr("stroke-width", "1px") 
      tooltip.html( function(){if(meta == "---") return "";else return "<p>" + d.key + "<br>" + pro + "<br>" + meta + "</p>";}).style("visibility", "visible")
      .style("top", (event.pageY-30) + "px").style("left",(event.pageX+10)+"px")
      .style("color", "black")

    })
    .on("mouseout", function(d, i) {
     svg.selectAll(".layer")
      .transition()
      .duration(250)
      .attr("opacity", "1");
      d3.select(this)
      .classed("hover", false)
      .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "<br>" + "hello" + "</p>" ).style("visibility", "hidden");
  })

This is what I have attempted so far just as a reference (it's not correct or complete :x) I put this inside the var graph function:

var circles = svg.selectAll("circle")
    .data(layers).enter().append("circle")
    .attr("x", function(d, i) {
        for(var k = 0; k < d.values.length; k++){
        //console.log(d.values[k].meta)
            if(d.values[k].meta != "---")
                return d.values[k].date
        }
    })
    .attr("y", function(d, i) {
        for(var k = 0; k < d.values.length; k++){
            if(d.values[k].meta != "---")
                return d.values[k].value
        }
    })
    .attr("r", 2)
    .style("fill", "black")

Any help would be appreciated.

Doominator10
  • 1
  • 1

1 Answers1

0

Well it isn't quite what I had in mind, but I had a workaround instead of binding the data directly onto each path.

var layers = stack(nest.entries(data));
...
...
...
var NumCircles = []
    for(i = 0; i < layers.length; i++){
        for(j = 0; j < layers[i].values.length; j++){
            if(layers[i].values[j].meta != "---") {NumCircles.push([layers[i].values[j].date, layers[i].values[j].value + layers[i].values[j].y0-.03]);}
        }
    }

    svg.selectAll("circle").data(NumCircles).enter().append("circle")
        .attr("cx", function(d) { return x(d[0]);})
        .attr("cy", function(d) { return y(d[1]);})
        .attr("r", 4)
        .style("fill", "red");

Just appended this almost directly onto the example. If anyone knows how I could still do the first method that would be nice to know :)

Doominator10
  • 1
  • 1