gpt4 book ai didi

javascript - 使用 D3.js、TypeScript 和 Angular 绘制饼图时出现编译错误

转载 作者:行者123 更新时间:2023-11-28 11:51:50 24 4
gpt4 key购买 nike

我正在尝试显示饼图,它实际上正在工作,即使我收到 TypeScript 编译错误:Argument of type '(d: any) => {}' is not assignable to parameter of type 'datum: Arc<number>, index: number, outerIndex: number) => number | string | boolean'. Type '{}' is not assignable to type 'number | string | boolean'. Type '{}' is not assignable to type 'boolean'.

过去两年我一直在使用 TypeScript,但上面的代码让我头晕。我不知道发生了什么,我尝试了一些方法,但到目前为止没有任何效果。

这是实际绘制饼图的代码:

function drawChart(){
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;

var colourValues = d3.scale.ordinal().range(d3.values(that.ColoursService.colours));

var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);

var pie = d3.layout.pie()
.sort(null)
.value(function(d: any) {return d.quantity});

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

var g = svg.selectAll('.arc')
.data(pie(data))
.enter().append('g')
.attr('class', 'arc');

g.append('path')
.attr('d', <any>arc)
.attr('fill', function(d: any) {
return colourValues(d.data.category);
});
}

这是 typescript 突出显示错误的地方,波浪线出现在“功能”一词下方。我需要让 TypeScript 编译器通过,但我不知道如何做。

最佳答案

尽管使用 <any>会摆脱编译器的提示,你基本上回避了强类型检查,这可以说是首先使用 Typescript 的要点之一。我在这个问题上挣扎了很长时间,最后,通过反复试验和大量与 the d3.d.ts definition for d3.svg.arc 相处的时间。 ,能够想出一种方法让所有类型排列起来。这是一个解决方案,演示如何在不使用 <any> 的情况下获取饼图。关键是你需要指定interface描述您的输入的形状,即您的数据:

interface Datum {
category: string;
quantity: number;
}

function drawChart(data: Array<Datum>) {

let width = 960,
height = 500,
radius = Math.min(width, height) / 2,
colourValues = d3.scale.category10();

// specify Datum as shape of data
let arc = d3.svg.arc<d3.layout.pie.Arc<Datum>>()
.innerRadius(radius - 70)
.outerRadius(radius - 10);

// notice accessor receives d of type Datum
let pie = d3.layout.pie<Datum>().sort(null).value((d: Datum):number => d.quantity);

// note input to all .attr() and .text() functions
// will be of type d3.layout.pie.Arc<Datum>
let fill = (d: d3.layout.pie.Arc<Datum>): string => colourValues(d.data.category);
let tfx = (d: d3.layout.pie.Arc<Datum>): string => `translate(${arc.centroid(d)})`;
let text = (d: d3.layout.pie.Arc<Datum>): 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 + ')');

// create a group for the pie chart
let g = svg.selectAll('.arc')
.data(pie(data))
.enter().append('g').attr('class', 'arc');

// add pie sections
g.append('path').attr('d', arc).attr('fill', fill);

// add labels
g.append('text').attr('transform', tfx).text(text);
}

请注意,我替换了您的 ColourService对于标准之一 d3颜色类别功能,但只要colourValues()它应该仍然有效。返回指定填充颜色的字符串。

希望这个示例展示了如何让您的自定义数据类型与d3一起使用。和 typescript 。

关于javascript - 使用 D3.js、TypeScript 和 Angular 绘制饼图时出现编译错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35413072/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com