Как применять всплывающие подсказки к элементам во вложенных слоях d3 (streamgraph)

Я пытаюсь создать интерактивный потоковый график, который использует всплывающие подсказки в определенные моменты времени. указывает вот так. В некоторых точках данных есть текст, и именно здесь я рисую круги и отображаю данные, когда навожу курсор на круги.

Как сделать так, чтобы круги отображались для каждого элемента во всех слоях, в которых есть текст в соответствующем месте? Большая часть кода такая же, как и на первом графике, с небольшой модификацией кода ниже.

Также в файле data.csv, расположенном внизу первой страницы графика, есть дополнительный столбец под названием «мета». У большинства записей есть «---» в мета, но у некоторых есть реальный текст. Это те, которые я хочу отобразить и иметь возможность наводить курсор для получения информации.

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");
  })

Это то, что я пытался сделать до сих пор, просто как ссылку (это не правильно или не полностью: x). Я поместил это в функцию var graph:

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")

Любая помощь будет оценена по достоинству.


javascript d3.js layer tooltip stream-graph
person Doominator10    schedule 23.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ну, это не совсем то, что я имел в виду, но у меня был обходной путь вместо привязки данных непосредственно к каждому пути.

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");

Просто добавил это почти прямо в пример. Если кто-нибудь знает, как я все еще мог сделать первый метод, было бы неплохо узнать :)

person Doominator10    schedule 25.07.2014