d3.js/Typescript Error: The attribute <path> d has encountered an issue. It was expecting a moveto path command ('M' or 'm') but instead received "function line(da…"

Question

d3.js/Typescript Error: The attribute <path> d has encountered an issue. It was expecting a moveto path command ('M' or 'm') but instead received "function line(da…"

Exploring d3.js for the first time, I am attempting to convert the data visualization rules outlined in this guide to work with vue3 and typescript.

Below you will find the code snippet I have been working on:

<template>
  <svg
    class="line-chart"
    :viewBox="viewBox"
  >
    <g transform="translate(0, 10)">
      <path
        class="line-chart__line"
        :d="path(data)"
      />
    </g>
  </svg>
 </template>


<script lang="ts">
import { ref, defineComponent, computed, toRef } from 'vue';
import * as d3 from 'd3';
export default defineComponent({
  name: "StandardMetric",
  props: {
    data: {
      required: true,
      type: Array,
    },
    width: {
      default: 500,
      type: Number,
    },
    height: {
      default: 270,
      type: Number,
    },
  },
  setup(props){
        const padding = 60;

        const data = [99, 71, 78, 25, 36, 92];

       const rangeY = computed(() => {
        const defaultHeight: number =props.height?props.height:270;
        const height: number = defaultHeight - padding;
        return [0, height];
      });
      
      const rangeX = computed(() => {
        const defaultWidth: number =props.width?props.width:500;
        const width: number = defaultWidth - padding;
        return [0, width];
      });

      
      const path =(linedata: number[])=> {

    
      const maxIndex: number = linedata.length-1;
  
      let maxValue = d3.max(linedata);
      maxValue = maxValue?maxValue:0
      const x = d3.scaleLinear().range(rangeX.value).domain([0, maxIndex]);
      const y = d3.scaleLinear().range(rangeY.value).domain([0, maxValue]);

      d3.axisLeft(x);
      d3.axisTop(y);

      // return d3.line<ChartData>()
      //    .x((d:ChartData, i) => x(i))
      //   // .x(d=>x(d))
      //   .y((d:ChartData) => y(d.p));
       return d3.line<number>()
              .x((d, i)=>x(i))
              .y(d=>y(d))
     }

     const line = computed(()=> {
       return path(data)
     })

     const viewBox = computed(() =>{
      return `0 0 ${props.width} ${props.height}`;
    })

     return {
       line,
       viewBox,
       path,
       data
     }


  }
}
)
</script>

Upon loading the page, I encountered the following error:

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function line(da…". More details...

I have included the package.json content below:

{
  "name": "tools-ui",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@types/d3": "^6.3.0",
    "d3": "^6.6.2",
    "element-plus": "^1.0.2-beta.36",
    "vue": "^3.0.5",
    "vue-router": "^4.0.5",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.20.0",
    "@typescript-eslint/parser": "^4.20.0",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "prettier": "^2.2.1",
    "typescript": "^4.1.3",
    "vite": "^2.1.5",
    "vue-tsc": "^0.0.15"
  }
}

I suspect there may be an issue with my path function, but I am unable to pinpoint the exact problem. Any assistance would be greatly appreciated. Thank you!

typescript d3.js

Answer 1

Answer №1

After some exploration, I have uncovered the following crucial details:

The path function must precisely define the "method to determine the path"
The line function should be calculated and ought to utilize a function derived from the path function, followed by using the data. Here is the refined version that works smoothly:

<template>
  <svg
    class="line-chart"
    :viewBox="viewBox"
  >
    <g transform="translate(0, 10)">
      <path
        class="line-chart__line"
        :d="line"
      />
    </g>
  </svg>
 </template>


<script lang="ts">
import { ref, defineComponent,computed, toRef } from 'vue';
import * as d3 from 'd3';
export default defineComponent({
  name: "StandardMetric",
  props: {
    data: {
      required: true,
      type: Array,
    },
    width: {
      default: 500,
      type: Number,
    },
    height: {
      default: 270,
      type: Number,
    },
  },
  setup(props){
        const padding = 60;

        const data = [99, 71, 78, 25, 36, 92];

       const rangeY = computed(() => {
        const defaultHeight: number =props.height?props.height:270;
        const height: number = defaultHeight - padding;
        return [0, height];
      });
      
      const rangeX = computed(() => {
        const defaultWidth: number =props.width?props.width:500;
        const width: number = defaultWidth - padding;
        return [0, width];
      });

      
      const path =()=> {

    
      const maxIndex: number = data.length-1;
  
      let maxValue = d3.max(data);
      maxValue = maxValue?maxValue:0
      const x = d3.scaleLinear().range(rangeX.value).domain([0, maxIndex]);
      const y = d3.scaleLinear().range(rangeY.value).domain([0, maxValue]);

      d3.axisLeft(x);
      d3.axisTop(y);

      return d3.line<number>()
              .x((d, i)=>x(i))
              .y(d=>y(d))
     }

     const line = computed(()=> {
       const pathFunc = path()
       return pathFunc(data)
     })

     const viewBox = computed(() =>{
      return `0 0 ${props.width} ${props.height}`;
    })

     return {
       line,
       viewBox,
  
     }


  }
}
)
</script>
<p>Let's hope this updated version proves beneficial for someone in need in the future</p>
    </div></answer1>
<exanswer1><div class="answer" i="66952683" l="4.0" c="1617613118" a="R2luZ2VyX0NoYWNoYQ==" ai="11663956">
<p>Ah, now the mystery has been unlocked - behold, the secrets lie within:</p>
<ol>
<li>The Path function is expected to yield the "definition of how to trace the path"</li>
<li>The Line function requires careful computation and implementation of a function obtained from the Path function in order to operate effectively. Check out the functional version below:</li>
</ol>
<pre><code><template>
  <svg
    class="line-chart"
    :viewBox="viewBox"
  >
    <g transform="translate(0, 10)">
      <path
        class="line-chart__line"
        :d="line"
      />
    </g>
  </svg>
 </template>


<script lang="ts">
import { ref, defineComponent,computed, toRef } from 'vue';
import * as d3 from 'd3';
export default defineComponent({
  name: "StandardMetric",
  props: {
    data: {
      required: true,
      type: Array,
    },
    width: {
      default: 500,
      type: Number,
    },
    height: {
      default: 270,
      type: Number,
    },
  },
  setup(props){
        const padding = 60;

        const data = [99, 71, 78, 25, 36, 92];

       const rangeY = computed(() => {
        const defaultHeight: number =props.height?props.height:270;
        const height: number = defaultHeight - padding;
        return [0, height];
      });
      
      const rangeX = computed(() => {
        const defaultWidth: number =props.width?props.width:500;
        const width: number = defaultWidth - padding;
        return [0, width];
      });

      
      const path =()=> {

    
      const maxIndex: number = data.length-1;
  
      let maxValue = d3.max(data);
      maxValue = maxValue?maxValue:0
      const x = d3.scaleLinear().range(rangeX.value).domain([0, maxIndex]);
      const y = d3.scaleLinear().range(rangeY.value).domain([0, maxValue]);

      d3.axisLeft(x);
      d3.axisTop(y);

      return d3.line<number>()
              .x((d, i)=>x(i))
              .y(d=>y(d))
     }

     const line = computed(()=> {
       const pathFunc = path()
       return pathFunc(data)
     })

     const viewBox = computed(() =>{
      return `0 0 ${props.width} ${props.height}`;
    })

     return {
       line,
       viewBox,
  
     }


  }
}
)
</script>

May this enlightenment serve as a beacon of guidance for those seeking answers down the road

Answer 2

After some exploration, I have uncovered the following crucial details:

The path function must precisely define the "method to determine the path"
The line function should be calculated and ought to utilize a function derived from the path function, followed by using the data. Here is the refined version that works smoothly:

<template>
  <svg
    class="line-chart"
    :viewBox="viewBox"
  >
    <g transform="translate(0, 10)">
      <path
        class="line-chart__line"
        :d="line"
      />
    </g>
  </svg>
 </template>


<script lang="ts">
import { ref, defineComponent,computed, toRef } from 'vue';
import * as d3 from 'd3';
export default defineComponent({
  name: "StandardMetric",
  props: {
    data: {
      required: true,
      type: Array,
    },
    width: {
      default: 500,
      type: Number,
    },
    height: {
      default: 270,
      type: Number,
    },
  },
  setup(props){
        const padding = 60;

        const data = [99, 71, 78, 25, 36, 92];

       const rangeY = computed(() => {
        const defaultHeight: number =props.height?props.height:270;
        const height: number = defaultHeight - padding;
        return [0, height];
      });
      
      const rangeX = computed(() => {
        const defaultWidth: number =props.width?props.width:500;
        const width: number = defaultWidth - padding;
        return [0, width];
      });

      
      const path =()=> {

    
      const maxIndex: number = data.length-1;
  
      let maxValue = d3.max(data);
      maxValue = maxValue?maxValue:0
      const x = d3.scaleLinear().range(rangeX.value).domain([0, maxIndex]);
      const y = d3.scaleLinear().range(rangeY.value).domain([0, maxValue]);

      d3.axisLeft(x);
      d3.axisTop(y);

      return d3.line<number>()
              .x((d, i)=>x(i))
              .y(d=>y(d))
     }

     const line = computed(()=> {
       const pathFunc = path()
       return pathFunc(data)
     })

     const viewBox = computed(() =>{
      return `0 0 ${props.width} ${props.height}`;
    })

     return {
       line,
       viewBox,
  
     }


  }
}
)
</script>
<p>Let's hope this updated version proves beneficial for someone in need in the future</p>
    </div></answer1>
<exanswer1><div class="answer" i="66952683" l="4.0" c="1617613118" a="R2luZ2VyX0NoYWNoYQ==" ai="11663956">
<p>Ah, now the mystery has been unlocked - behold, the secrets lie within:</p>
<ol>
<li>The Path function is expected to yield the "definition of how to trace the path"</li>
<li>The Line function requires careful computation and implementation of a function obtained from the Path function in order to operate effectively. Check out the functional version below:</li>
</ol>
<pre><code><template>
  <svg
    class="line-chart"
    :viewBox="viewBox"
  >
    <g transform="translate(0, 10)">
      <path
        class="line-chart__line"
        :d="line"
      />
    </g>
  </svg>
 </template>


<script lang="ts">
import { ref, defineComponent,computed, toRef } from 'vue';
import * as d3 from 'd3';
export default defineComponent({
  name: "StandardMetric",
  props: {
    data: {
      required: true,
      type: Array,
    },
    width: {
      default: 500,
      type: Number,
    },
    height: {
      default: 270,
      type: Number,
    },
  },
  setup(props){
        const padding = 60;

        const data = [99, 71, 78, 25, 36, 92];

       const rangeY = computed(() => {
        const defaultHeight: number =props.height?props.height:270;
        const height: number = defaultHeight - padding;
        return [0, height];
      });
      
      const rangeX = computed(() => {
        const defaultWidth: number =props.width?props.width:500;
        const width: number = defaultWidth - padding;
        return [0, width];
      });

      
      const path =()=> {

    
      const maxIndex: number = data.length-1;
  
      let maxValue = d3.max(data);
      maxValue = maxValue?maxValue:0
      const x = d3.scaleLinear().range(rangeX.value).domain([0, maxIndex]);
      const y = d3.scaleLinear().range(rangeY.value).domain([0, maxValue]);

      d3.axisLeft(x);
      d3.axisTop(y);

      return d3.line<number>()
              .x((d, i)=>x(i))
              .y(d=>y(d))
     }

     const line = computed(()=> {
       const pathFunc = path()
       return pathFunc(data)
     })

     const viewBox = computed(() =>{
      return `0 0 ${props.width} ${props.height}`;
    })

     return {
       line,
       viewBox,
  
     }


  }
}
)
</script>

May this enlightenment serve as a beacon of guidance for those seeking answers down the road

d3.js/Typescript Error: The attribute <path> d has encountered an issue. It was expecting a moveto path command ('M' or 'm') but instead received "function line(da…"

Answer №1

Similar questions

The 'innerText' property is not found in the 'Element' type

When working with Visual Studio and a shared TypeScript library, you may encounter the error message TS6059 stating that the file is not under the 'rootDir'. The 'rootDir' is expected to contain all source files

How to update the page title in React TypeScript 16.8 without using Helmet

Combine all Typescript files into one JavaScript file without any extra steps

Issue with Cypress TypeScript: Unable to locate @angular/core module in my React application

The failure to import a node module in next.js with typescript

Is the spread operator in React failing to function as anticipated?

Instructions on how to dynamically show specific text within a reusable component by utilizing React and JavaScript

Exporting declarations and different export types within a TypeScript ambient module

I'm encountering a 404 error on Next.js localhost:3000

There is no mistake when using a value that falls outside of a TypeScript

Error: The property 'template' is not defined and cannot be read

Solving runtime JavaScript attribute issues by deciphering TypeScript compiler notifications

angular-tree-component | fetch Path

Integrate a dynamic component into the Angular 7 template

What is the best way to implement a switch case for the value of a property within an object in a TypeScript file?

No signature match found for 'new (): XXX' within 'XXX'

Unable to loop through the Array

After each save, gulp-typescript is emitting errors, however, it works without any issues upon subsequent saves

When ngIf fails to detect a change in a variable's value