не могу изменить непрозрачность определенного пути в диаграмме солнечных лучей D3js

Моя цель - изменить непрозрачность определенного пути.

Здесь я добавляю путь для каждого фрагмента диаграммы:

h = f.selectAll("path").data(o);
h.enter().append("path")        
.attr("id", function (t, n) { return "path-" + n})
.attr("d", x).attr("fill-rule", "evenodd").style("fill", n).on("click", l)
.on("mouseover", function(t,n) {mouseover("path-" + n)});

внутри функции наведения мыши вот что я пробовал:

function mouseover(d){ 
    // d is the id of the path that was hovered over
    // d looks like 'path-20'

    d3.selectAll("path").style("opacity", 0.3); // changes opacity for entire sunburst chart        
    d3.selectAll(d).style("opacity", 0.3); // does nothing
    d3.selectAll("path-20").style("opacity", 0.3); // does nothing
    d3.select(d).style("opacity", 0.3); // does nothing
    d3.select("path-20").style("opacity", 0.3); // does nothing
}

d3.js sunburst-diagram
person user1753377    schedule 14.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, если вы хотите выбрать по классу, используйте вместо этого .<class-name>. Если вы хотите выбрать по идентификатору, используйте #<id>. Это универсальные селекторы из CSS, jQuery, ванильного JavaScript, а также D3.

Гораздо проще, однако, то, что для функции on("mouseover", function() { ... }) вместо точек this теперь указывает на HTMLElement, который вы хотите выбрать.

Это делает следующую функцию идеальной для того, что вы хотите:

const data = d3.range(5);

d3.select('svg')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', 20)
  .attr('height', 20)
  .attr('x', function(d, i) {
    return 30 * i;
  })
  .attr('y', 40)
  .on('mouseover', function() {
    d3.select(this).attr('opacity', 0.2);
  })
  .on('mouseleave', function() {
    d3.select(this).attr('opacity', null);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

person Ruben Helsloot    schedule 14.10.2020