使用 D3plus 向 D3 折线图添加注释

问题描述

我正在添加一个折线图，在 Vue SPA 中使用 x 轴上的日期和 Y 轴上的美元值，我需要添加一些注释；特别是三条带有不同日期标签的垂直线（代表合同有效期内的日期），以及一条带有美元价值的水平线（代表合同的全额支付价值）。我最初将 d3 与 d3-annotation 一起使用，但由于与最新的 D3 冲突，我一直无法使用该库。

我开始使用 d3plus，但看起来我必须使用它从头开始构建我的图表，而不仅仅是在使用 d3 制作的现有图表之上添加注释； annotations 只是 Plot() 类上的一个方法。

这是我的 d3 版本图表。它被分解为几个 Vue 组件：

</template>
                <svg id="lineChart" :style="{opacity: loading  ? .5 : 1}" :viewBox="viewBox" preserveAspectRatio="xMinYMin meet">
                    <spinner
                        :x="(width / 2) - 25"
                        :y="(height / 2) - 25"
                        height="100"
                        width="100"
                     ></spinner>

                    <line-chart-data
                        stroke="black"
                        :strokeWidth="3"
                        :chartData="lineDataForChart(this.values)"
                    ></line-chart-data>

                    <g id="funding-timeline-y-axis"></g>
                    <g id="funding-timeline-x-axis"></g>
                </svg>
</template>

...
<script>
    export default {
        name: "LineChartData",props: {
            chartData: String,stroke: String,strokeWidth: Number
        }
    }
</script>

line-chart-data

<template>
    <path style="fill: none" :stroke-width="strokeWidth" :stroke="stroke" :d="chartData"></path>
</template>

既然 d3plus 是建立在 d3 之上的，那么有没有办法在 d3plus 中添加注释而无需从头开始在 d3plus 中构建所有内容？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

d3plus graph graph graph javascript