Сделать кольцевую диаграмму кликабельной

Может ли кто-нибудь помочь мне в том, как я могу сделать мою следующую кольцевую диаграмму кликабельной? Я просто создаю диаграмму пончиков из некоторых фиктивных данных и хочу, чтобы каждая часть пончика была кликабельной. Я новичок в D3, и мне трудно включить функцию щелчка в кольцевую диаграмму. Мне трудно сделать каждую часть кольцевой диаграммы доступной для кликов в d3.js. Любая помощь приветствуется. Я добавил свой фрагмент кода здесь.

function myFunction(width,height,margin,datax,dis,hg) {
    var radius = Math.min(width, height) / 2 - margin
    var svg = d3.select("#my_dataviz")
      .append("svg")
        .attr("width", width)
        .attr("height", hg)
      .append("g")
        .attr("transform", "translate(" + width / dis + "," + height / 2 + ")");
    var color = d3.scaleOrdinal()
      .domain(Object.keys(data))
      .range(d3.schemeDark2);
    var pie = d3.pie()
      .sort(null) 
    .value(function(d) {return d.value; })  
    var data_ready = pie(d3.entries(data))
    var arc = d3.arc()
      .innerRadius(radius * 0.5)       
    .outerRadius(radius * 0.8)
    svg
      .selectAll('allSlices')
      .data(data_ready)
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d){ return(color(d.data.key)) })
      .attr("stroke", "white")
      .style("stroke-width", "2px")
    .style("opacity", 0.7)
    ;  }
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

d3.js donut-chart clickable
person Mithun Ghosh    schedule 24.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам просто нужно выбрать все path и привязать событие, нажав на него.

svg.selectAll('path')
   .on('click', (d, i, n) => {
      console.log(d, i, n)
   })
person ttquang1063750    schedule 24.12.2020