d3.js/打字稿：错误： <path> 属性 d：预期的移动到路径命令("M"或"m")，"function line(da…"

Question

我是d3.js的新手，正在尝试重写https://medium.com/@lambrospd/5-简单规则到数据可视化-使用-vue-js和-d3-js-f6b2bd6a1d40到vue3+类型脚本

下面请找到我的代码

<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>

当我加载页面时，我得到了以下错误：

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function line(da…".
patchAttr @ runtime-dom.esm-bundler.js:194
patchProp @ runtime-dom.esm-bundler.js:386
mountElement @ runtime-core.esm-bundler.js:3905
processElement @ runtime-core.esm-bundler.js:3868
patch @ runtime-core.esm-bundler.js:3788
mountChildren @ runtime-core.esm-bundler.js:3975
mountElement @ runtime-core.esm-bundler.js:3896
processElement @ runtime-core.esm-bundler.js:3868
patch @ runtime-core.esm-bundler.js:3788
mountChildren @ runtime-core.esm-bundler.js:3975
mountElement @ runtime-core.esm-bundler.js:3896
processElement @ runtime-core.esm-bundler.js:3868
patch @ runtime-core.esm-bundler.js:3788
mountChildren @ runtime-core.esm-bundler.js:3975
processFragment @ runtime-core.esm-bundler.js:4141
patch @ runtime-core.esm-bundler.js:3784
componentEffect @ runtime-core.esm-bundler.js:4298
reactiveEffect @ reactivity.esm-bundler.js:42
effect @ reactivity.esm-bundler.js:17
setupRenderEffect @ runtime-core.esm-bundler.js:4263
mountComponent @ runtime-core.esm-bundler.js:4222
processComponent @ runtime-core.esm-bundler.js:4182
patch @ runtime-core.esm-bundler.js:3791
patchBlockChildren @ runtime-core.esm-bundler.js:4091
processFragment @ runtime-core.esm-bundler.js:4152
patch @ runtime-core.esm-bundler.js:3784
patchBlockChildren @ runtime-core.esm-bundler.js:4091
patchElement @ runtime-core.esm-bundler.js:4055
processElement @ runtime-core.esm-bundler.js:3871
patch @ runtime-core.esm-bundler.js:3788
componentEffect @ runtime-core.esm-bundler.js:4368
reactiveEffect @ reactivity.esm-bundler.js:42
callWithErrorHandling @ runtime-core.esm-bundler.js:154
flushJobs @ runtime-core.esm-bundler.js:384
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:286
queueJob @ runtime-core.esm-bundler.js:280
run @ reactivity.esm-bundler.js:183
trigger @ reactivity.esm-bundler.js:189
scheduler @ reactivity.esm-bundler.js:851
run @ reactivity.esm-bundler.js:183
trigger @ reactivity.esm-bundler.js:189
set value @ reactivity.esm-bundler.js:761
handleClick @ Home.vue:114
onClick @ Home.vue:35
callWithErrorHandling @ runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:163
emit @ runtime-core.esm-bundler.js:642
(anonymous) @ runtime-core.esm-bundler.js:6689
handleClick @ index.esm.js:1
createBlock.onClick.t.<computed>.t.<computed> @ index.esm.js:1
callWithErrorHandling @ runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:163
invoker @ runtime-dom.esm-bundler.js:333
Show 4 more frames

我的包里有下面的.json：

{
"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"
}
}

我相信我的路径函数有问题，但我不知道问题出在哪里。你能帮忙吗？感谢

Answer 1

我拿到了——关键是：

1. Path函数需要返回"；如何确定路径的函数">
2. 行函数需要被计算&需要从路径函数中获取一个函数，然后使用数据以下是工作版本

<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>

希望它能帮助未来的