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?