1

I'm working adding a line plot graph that uses dates on the x axis and dollar values on the Y axis in a Vue SPA, and I need to add some annotations; in particular three vertical lines with labels at different dates (representing dates in the life of a contract), and a horizontal line at a dollar value (represents a contract's fully disbursed value). I was initially using d3 with d3-annotation, but due to conflicts with the latest D3, I have been unable to use that library.

I started playing with d3plus, but it looks like I have to use it to build my chart from scratch, instead of just adding annotations on top of an existing chart made with d3; the annotations are just a method on the Plot() class.

Here's what I have for my d3 version of the chart. It's broken up into a couple of Vue components:

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

Since d3plus is built on top of d3, is there a way to add an annotation to this d3 chart without having to build everything in d3plus from scratch?

4

0 回答 0