D3 鼠标悬停和鼠标移开

Question

D3 鼠标悬停和鼠标移开

我使用 typescript 和D3. 我想在mouseover事件期间突出显示饼图的各个部分。我当前的代码只是改变文本的颜色，而不是整个弧线。有人可以提出解决方案。

这是我的打字稿代码：

 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);
  
}

Run Code Online (Sandbox Code Playgroud)

这是我的 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mik*_*kov 6

您应该将事件处理程序函数附加到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)
  });

Run Code Online (Sandbox Code Playgroud)

另一种方式 - 在g元素上附加事件处理程序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')
  });

Run Code Online (Sandbox Code Playgroud)

这里 - https://jsfiddle.net/tafxrkdL/1/ - 一个纯 JavaScript（不是 TypeScript）的例子。

归档时间：	8 年，2 月前
查看次数：	3247 次
最近记录：	5 年，2 月前