D3 Mouseover和Mouseout

我使用typescript和D3创建了一个饼图。我想在mouseover事件期间突出显示饼图的各个部分。我当前的代码仅改变文本的颜色，而不是整个圆弧。有人可以提出解决方案吗？D3 Mouseover和Mouseout

这里是我的打字稿代码：

interface Data { 

      quantity: number; 
      category: string; 
     } 
     let testData: Data[] = [ 
      { 
       quantity: 25, 
       category: 'a' 
      }, 
      { 
       quantity: 50, 
       category: 'b' 
      }, 
      { 
       quantity: 100, 
       category: 'c' 
      }, 
      { 
       quantity: 200, 
       category: 'd' 
      }, 
      { 
       quantity: 300, 
       category: 'e' 
      }]; 
      drawChart(testData); 
function drawChart(data: Data[]) { 

    let width = 400, 
     height = 400, 
     radius = Math.min(width, height)/2, 
     colourValues = d3.scale.category20c(); 

    let arc = d3.svg.arc<d3.layout.pie.Arc<Data>>() 
     .innerRadius(0) 
     .outerRadius(radius-20); 
    let arcHover=d3.svg.arc<d3.layout.pie.Arc<Data>>() 
        .innerRadius(0) 
        .outerRadius(radius+10); 

    let pie = d3.layout.pie<Data>().value((d: Data):number => d.quantity); 


    let fill = (d: d3.layout.pie.Arc<Data>): string => colourValues(d.data.category); 
    let tf = (d: d3.layout.pie.Arc<Data>): string => `translate(${arc.centroid(d)})`; 
    let text = (d: d3.layout.pie.Arc<Data>): string => d.data.category; 

    let svg = d3.select('.pie-chart').append('svg') 
     .attr('width', width) 
     .attr('height', height) 
     .append('g') 
     .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')'); 

    let g = svg.selectAll('.arc') 
     .data(pie(data)) 
     .enter().append('g').attr('class', 'arc') 
     .data(pie(data)) 
     .on("mouseover",function(d) 
     { 
     d3.select(this).attr('fill','blue').attr('d',arcHover)}) 
     .on("mouseout",function(d) 
    { 
     d3.select(this).attr('fill','black').attr('d',arc) 
    }); 
    g.append('path').attr('d', arc).attr('fill', fill)   
    g.append('text').attr('transform', tf).text(text); 

}

这里是我的HTML：

<head>  
</head> 
    <body> 
     <div class="pie-chart"></div> 
     <script src="https://d3js.org/d3.v3.min.js"></script> 
     <script src="piechart1.js"></script> 
    </body>

来源

2017-10-09 Vishnu Suresh

应该高度path元素在你的事件处理函数，而不是在g：

g.append('path') 
    .on("mouseover", function(d) { 
    d3.select(this).attr('fill', 'blue').attr('d', arcHover) 
    }) 
    .on("mouseout", function(d) { 
    d3.select(this).attr('fill', 'black').attr('d', arc) 
    });

另一种方法 - 在上附加事件处理程序为text和path分别元件和变色：

let g = svg.selectAll('.arc') 
    .data(pie(data)) 
    .enter().append('g').attr('class', 'arc') 
    .data(pie(data)) 
    .on("mouseover", function(d) { 
    d3.select(this).select('path').attr('fill', 'blue').attr('d', arcHover); 
    d3.select(this).select('text').attr('fill', 'blue') 
    }) 
    .on("mouseout", function(d) { 
    d3.select(this).select('path').attr('fill', 'black').attr('d', arc); 
    d3.select(this).select('text').attr('fill', 'black') 
    });

这里 - https://jsfiddle.net/tafxrkdL/1/ - 与纯JavaScript的例子。

来源

2017-10-09 07:58:43

D3 Mouseover和Mouseout

回答

相关问题