iterating over undefined map

[Karljoy973]

0

I am coding a graph using the d3 library that you can find on d3js.org I wish to create a vue component called that would show a doughnut chart the code to make it is quite big so I want to put it in a separate js file and import it as a function in my doughtnut-chart component. My issue is, when I do so, I have an error telling me that I am trying to iterate over an empty dataset. Later on I am planning on doing some sql queries. Here below you can see my code :

my js file

<!--index.js-->
import * as d3 from "d3";

function PieChart(data, {
    name = ([x]) => x,  // given d in data, returns the (ordinal) label
    value = ([, y]) => y, // given d in data, returns the (quantitative) value
    title, // given d in data, returns the title text
    width = 500, // outer width, in pixels
    height = 500, // outer height, in pixels
    innerRadius = 0.25*Math.min(height,width), // inner radius of pie, in pixels (non-zero for donut)
    outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels
    labelRadius = (innerRadius * 0.2 + outerRadius * 0.8), // center radius of labels
    format = ",", // a format specifier for values (in the label)
    names, // array of names (the domain of the color scale)
    colors, // array of colors for names
    stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths
    strokeWidth = 1, // width of stroke separating wedges
    strokeLinejoin = "round", // line join of stroke separating wedges
    padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges
  } = {}) {
    // Compute values.
    const N = d3.map(data, name);
    const V = d3.map(data, value);
    const I = d3.range(N.length).filter(i => !isNaN(V[i]));
  
    // Unique the names.
    if (names === undefined) names = N;
    names = new d3.InternSet(names);
  
    // Chose a default color scheme based on cardinality.
    if (colors === undefined) colors = d3.schemeSpectral[names.size];
    if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size);
  
    // Construct scales.
    const color = d3.scaleOrdinal(names, colors);
  
    // Compute titles.
    if (title === undefined) {
      const formatValue = d3.format(format);
      title = i => `${N[i]}\n${formatValue(V[i])}`;
    } else {
      const O = d3.map(data, d => d);
      const T = title;
      title = i => T(O[i], i, data);
    }
  
    // Construct arcs.
    const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I);
    const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
    const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
    
    const svg = d3.create("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("viewBox", [-width / 2, -height / 2, width, height])
        .attr("style", "max-width: 100%; height: auto; height: intrinsic;");
  
    svg.append("g")
        .attr("stroke", stroke)
        .attr("stroke-width", strokeWidth)
        .attr("stroke-linejoin", strokeLinejoin)
      .selectAll("path")
      .data(arcs)
      .join("path")
        .attr("fill", d => color(N[d.data]))
        .attr("d", arc)
      .append("title")
        .text(d => title(d.data));
  
    svg.append("g")
        .attr("font-family", "sans-serif")
        .attr("font-size", 10)
        .attr("text-anchor", "middle")
      .selectAll("text")
      .data(arcs)
      .join("text")
        .attr("transform", d => `translate(${arcLabel.centroid(d)})`)
      .selectAll("tspan")
      .data(d => {
        const lines = `${title(d.data)}`.split(/\n/);
        return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1);
      })
      .join("tspan")
        .attr("x", 0)
        .attr("y", (_, i) => `${i * 1.1}em`)
        .attr("font-weight", (_, i) => i ? null : "bold")
        .text(d => d);
  
    return Object.assign(svg.node(), {scales: {color}});
  }

  export default PieChart;

my doughnut-chart component

<template>
  <div id="chart">
    {{ PieChart()  }}
  </div>
</template>

<script>
const data = [{
    name : "toto",
    value: 10
  },
  {
    name : "tato",
    value: 10
  },
  {
    name : "tota",
    value: 10
  }];
  PieChart( data, {
  name: d => d.name,
  value: d => Math.round(100*d.value/30),
  width: 400,
  height: 400
  })
export default  {
  name: 'DoughnutChart',
  methods : {
    PieChart,
  }
}



import PieChart from './index.js';
</script>

my view component :

<template>
    <DoughnutChart></DoughnutChart>
</template>
  
  <script>





//export

//import 
  import DoughnutChart from '@/components/Charts/DoughnutChart/DoughnutChart.vue';
  export default {
    name: 'myBudgetView',
    components: {
      DoughnutChart
    },
    
  }
</script>

<style scoped>
#chart{
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 75%;
  height: 75%;
}

</style>

I use components that I call views in order to gather many components

I wish to have something like this

and this is what I have instead

does someone know what should I do in order to get my graph ?

[mbostock]

I think the error is because you’re calling PieChart with no arguments in the template: {{ PieChart() }}.

I believe the way to do this with Vue is to use the mounted directive. You can see an example D3 Vue component here in our in-development new documentation site #3654:

https://github.com/d3/d3/blob/mbostock/vitepress/docs/components/ExampleBarChart.vue

[Karljoy973]

yes I had to make a function without parameters which would call piechart with the right parameters