In my Vue project, I attempted to create a simple Doughnut chart following the example provided in the D3.js documentation: Doughnut Chart.
However, I encountered an issue while trying to implement this chart in Vue. Every time I attempt to get it to work, I receive the error message
[Vue warn]: Error in mounted hook: "TypeError: _ is not iterable"I am also looking for a way to ensure that the SVG fills the parent div and adjusts dynamically based on the width and height of the parent container.
<template>
<div class="p-3 flex flex-col">
<div class="w-full flex-1">
<div id="my_dataviz"></div>
</div>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "DoughnutChartItem",
props: {
data: {
type: Array,
required: true
}
},
mounted() {
var width = 450;
var height = 450;
var margin = 40;
var radius = Math.min(width, height) / 2 - margin;
var svg = d3
.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = { a: 9, b: 20, c: 30, d: 8, e: 12 };
var color = d3
.scaleOrdinal()
.domain(data)
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
var pie = d3.pie().value(function(d) {
return d.value;
});
var data_ready = pie(d3.entries(data));
svg
.selectAll("whatever")
.data(data_ready)
.enter()
.append("path")
.attr(
"d",
d3
.arc()
.innerRadius(100)
.outerRadius(radius)
)
.attr("fill", function(d) {
return color(d.data.key);
})
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7);
}
};
</script>