Mam wykres słupkowy. Chciałbym zrobić tę samą opcję, ale zamiast podkreślić, powinien narysować linię. Czy to możliwe?

2
user3856196 15 sierpień 2014, 20:34

2 odpowiedzi

Najlepsza odpowiedź

Najprostsza opcja, którą mogę wymyślić, jest tylko append a <line> do SVG za każdym razem, gdy mouseover pasek i wyjmij tę linię, gdy jesteś mouseout. Jest podobny do rozwiązania proponowanego przez @ckersch, z wyjątkiem tego, że ma więcej napowietrznych (zmienisz dom każdy mouseover / mouseout), ale łatwiej jest wdrożyć i nie zmienia struktury i nie zmienia struktury WSZYSTKIE SVG W ogóle. Możesz dodać następujące informacje, gdy dołączysz bary:

.on("mouseover", function(d){
    svg.append("line")
       .attr("class", "mouseover-line")
       .attr("x1", x(d[0]) + x.rangeBand()/2)
       .attr("x2", x(d[0]) + x.rangeBand()/2)
       .attr("y1", y(0))
       .attr("y2", y(d[1]));
       .style("stroke", "#000")
})
.on("mouseout", function(){
    d3.selectAll(".mouseover-line").remove();
});

Działający skrzypce Oto.

2
mdml 15 sierpień 2014, 21:36

Możliwe jest połączeniem CSS i JavaScript. Możesz zdefiniować CSS dla klasy w następujący sposób:

.hiddenLine{ opacity: 0; }

Jeśli zbudujesz swój dom oba bary, jak i linie jako dzieci g elementy, z prętami, więc linie renderują na nich, jak więc:

...
<g class="bar">
  <rect></rect>
  <line></line>
</g>
//more bars
...

Poniższy JavaScript utworzy efekt Hover:

d3.select('.bars')
  .on('mouseover', function(d){
    d3.select(this).select('line').classed('hiddenLine', false);
  })
  .on('mouseout', function(d){
    d3.select(this).select('line').classed('hiddenLine', true);
  });
2
ckersch 15 sierpień 2014, 21:24