我使用typescript和D3创建了一个饼图。我想在mouseover
事件期间突出显示饼图的各个部分。我的当前代码只是改变文本的颜色,而不是整个弧。有人可以提出解决方案。
这是我的TypeScript代码:
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>
答案 0 :(得分:2)
您应该在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)
});
另一种方法 - 在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')
});
此处 - https://jsfiddle.net/tafxrkdL/1/ - 使用纯JavaScript(非TypeScript)的示例。