Загрузить всплывающую подсказку d3 js при загрузке страницы - PullRequest
Новая
       84

Загрузить всплывающую подсказку d3 js при загрузке страницы

1 голос
/ 20 июня 2020

У меня есть радиальная гистограмма, в которой используются всплывающие подсказки для отображения дополнительных данных при наведении курсора мыши. Я хочу, чтобы моя страница загружалась и отображалась всплывающая подсказка для определенной c полосы (возможно, по переменной).

Я представляю себе что-то вроде этого: 

.on("pageload", showToolTip(d.specificBarIndex)

I ' Я уверен, что это далеко, но просто пытаюсь донести идею. Вот код, в котором я создаю всплывающие подсказки: 

            // create a tooltip
            var Tooltip = d3.select("#my_dataviz")
                .append("div")
                .style("opacity", 0)
                .attr("class", "tooltip")
                .style("background-color", "none")
                .style("color", "white")
                .style("border-width", "2px")
                .style("border-radius", "5px")
                .style("padding", "5px")
                .style("position", "static")
                .style("z-index", "10")
                .style("width", "350px")
                //.style("min-height", "100px")
                .style("height", "150px")
                //.style("margin", "auto")
                .style("text-align", "left")

            // Three function that change the tooltip when user hover / move / leave a cell
            var mouseover = function(d) {
                if (d.source == "dummy")
                {}
                else 
                {
                    Tooltip
                    .style("opacity", 1)
                    d3.select(this)
                    .style("stroke", "white")
                    .style("opacity", 1)
                }   
            }
            var mousemove = function(d) {
                if (d.source == "dummy")
                {}
                else{
                    Tooltip
                    .html(d.dateAdded + "<br>"+"<strong>" 
                        + "DIVERGENCE:" + "</strong>" + "<br>" + d.headline
                        + "  " + "<a target='_blank' href=" + d.siteurl + ">" + "[source]" +"</a>")
                    .style("left", d + "px")
                    //.style("top", (d3.mouse(this)[1]) + "px")
                    //.style("left", (d3.event.pageX - 250) + "px")
                    .style("top", (d3.event.pageY - 10) + "px")
                }

            }
            var mouseleave = function(d) {
                if (d.source == "dummy")
                {}
                else{
                    Tooltip
                    //.style("opacity", 0)
                    d3.select(this)
                    .style("stroke", "none")
                    .style("opacity", 0.8)
                }

            }

А вот код, в котором я добавляю всплывающие подсказки к диаграмме: 

// Add bars
                svg.append("g")
                    .selectAll("path")
                    .data(data)
                    .enter()
                    .append("path")
                    .attr("fill", "#Black")
                    .attr("d", d3.arc()     
                        .innerRadius(innerRadius)
                        .outerRadius(function(d) { return y(d['radii']); })
                        .startAngle(function(d) { return x(d.indexKey); })
                        .endAngle(function(d) { return x(d.indexKey) + x.bandwidth() + .025; }) //Sets width of each bar
                        .padRadius(innerRadius))
                        .on("mouseover", mouseover)
                        .on("mousemove", mousemove)
                        .on("mouseleave", mouseleave)
                });

Итак как я могу изменить этот код, чтобы отображать одну всплывающую подсказку для определенной панели c при загрузке страницы?

...