0
J'essaie de créer un camembert en utilisant des caractères dactylographiés et d3 avec des données statiques. Mais je reçois juste un écran vide. Peut-on aider quelqu'un? Je suis nouveau à la fois d3 et tapuscrit.Créer un camembert avec TypeScript et D3
Il n'y a pas de fichier tsconfig.json. Je compile simplement le fichier .ts en utilisant la commande tsc et lier le fichier .js correspondant au HTML.
Voici le code tapuscrit:
interface Data {
quantity: number;
category: string;
}
let testData: Data[] = [
{
quantity: 10,
category: 'a'
},
{
quantity: 20,
category: 'b'
},
{
quantity: 10,
category: 'c'
},
{
quantity: 100,
category: 'd'
},
{
quantity: 500,
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(radius - 70)
.outerRadius(radius - 0);
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');
g.append('path').attr('d', arc).attr('fill', fill);
g.append('text').attr('transform', tf).text(text);
}
Voici mon HTML:
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="piechart1.js"></script>
</head>
<body>
<div class="pie-chart"></div>
</body>