Как показать метки на диаграмме при наведении курсора с помощью D3.js? - PullRequest
Новая
       32

Как показать метки на диаграмме при наведении курсора с помощью D3.js?

0 голосов
/ 05 октября 2018

Я нарисовал горизонтальную диаграмму с D3.js.Каждая полоса имеет метку, и полоса меняет цвет при наведении мыши.Видимость метки изначально скрыта. 

var bars = gw2.selectAll(".bar")
        .data(data)
        .enter()
        .append("g")
    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("id", function(d) { return d.country+"_bar"; })
        .attr("y", function(d) { return y2(d.country); })               
        .attr("height", y2.bandwidth())
        .style("filter", "url(#drop-shadow-h)")
        .attr("width", function(d) { return x2(d.value); });        
    //add a value label to the right of each bar
    bars.append("text")
        .attr("class", "textlbl")
        .attr("id", function(d) { return d.country+"_lbl"; })
        .attr("fill", "#404040")
        .attr("x", function(d) { return x2(d.value) - 5 })
        .attr("y", function(d){ return y2(d.country) + (y2.bandwidth()/2); })
        .attr("dy", ".35em") //vertical align middle
        .style("text-anchor", "end")
        .text(function(d){ return (d.value); });    

.textlbl {       
   font-size: 0.7rem;
   font-weight: bold;
   visibility: hidden;
}

Мне бы хотелось, чтобы в дополнение к изменению цвета одной полосы при наведении мыши, соответствующая метка также изменяла видимость на «видимая».Один столбец выглядит следующим образом: 

<g>
    <rect class="bar" id="Greece_bar" y="149" height="14" width="230" style="filter: url(&quot;#drop-shadow-h&quot;);"></rect>
    <text class="textlbl" id="Greece_lbl" fill="#404040" x="225" y="156" dy=".35em" style="text-anchor: end; visibility: hidden;">56.6</text>
</g>

Я пробовал разные решения, но они не работают.Во-первых, с помощью «selectAll», но он выбирает все столбцы и все метки, а не только тот, что при наведении мыши: 

gw2.selectAll(".bar")
    .on("mouseover", function(d){               
        d3.selectAll(".textlbl").style("visibility", "visible");
    });

Затем я попытался с помощью «this», но не могу получить селектор'textlbl' и код возвращает ошибку "'[объект SVGRectElement] +. textlbl' не является допустимым селектором". 

gw2.select(".bar")
    .on("mouseover", function(d){               
        d3.select(this+"+.textlbl").style("visibility", "visible");
    });

Любое предложение?

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Fixed.Работает с selectAll 

gw2.selectAll(".bar")
    .on("mouseover", function(d){               
        d3.select(this.parentNode).select('.textlbl').style("visibility", "visible");
});
0 голосов
/ 05 октября 2018

Возможно, это подойдет.

В d3 вы не можете выбрать братьев и сестер, сначала перейдите к родителю 

gw2.select(".bar")
    .on("mouseover", function(d){               
        d3.select(this.parentNode).select('.textlbl').style("visibility", "visible");
    });
...