Multiple Shape annotations on D3plus line plot

Question

I have a line plot created using d3plus, and I need to have multiple line annotations (one horizontal and two vertical) with Shape labels to identify them. I am able to get the lines to show properly, but I am unable to get multiple labels to show up on the graph.

Here is my set of data:

[
  {"id":"line","myDate":"Sep 2011","value":8303269},
  {"id":"line","myDate":"Jul 2012","value":8389066},
  {"id":"line","myDate":"Sep 2012","value":8632844},
  {"id":"line","myDate":"Mar 2013","value":8926414},
  {"id":"line","myDate":"Jun 2013","value":9169985},
  {"id":"line","myDate":"Mar 2014","value":9273689},
  {"id":"line","myDate":"Sep 2014","value":9343712},
  {"id":"line","myDate":"Dec 2014","value":9416974},
  {"id":"line","myDate":"May 2015","value":9546380},
  {"id":"line","myDate":"Sep 2015","value":10484320},
  {"id":"line","myDate":"Sep 2015","value":11455165},
  {"id":"line","myDate":"Dec 2015","value":11997581},
  {"id":"line","myDate":"Apr 2016","value":12104931},
  {"id":"line","myDate":"May 2016","value":12111915},
  {"id":"line","myDate":"Jun 2016","value":12127119},
  {"id":"line","myDate":"Jul 2016","value":12800226},
  {"id":"line","myDate":"Mar 2017","value":12915303},
  {"id":"line","myDate":"Nov 2017","value":12947360},
  {"id":"line","myDate":"Nov 2018","value":12957309}
]

and here is my LinePlot annotations array.

            new LinePlot()
                .select("#demo")
                .height(500)
                .config({
                    data: vm.plotData,
                    x: 'myDate',
                    y: 'value',
                    groupBy: 'id',
                    annotations: [
                        {
                            data: [
                                {id: "start", x: "Jul 2012", y: 8000000},
                                {id: "start", x: "Jul 2012", y: 20000000},
                                {id: "end", x: "Nov 2017", y: 8000000},
                                {id: "end", x: "Nov 2017", y: 20000000},
                                {id: "dotted", x: "Sep 2011", y: this.item.ceilingValue},
                                {id: "dotted", x: "Nov 2018", y: this.item.ceilingValue}
                            ],
                            shape: "Line",
                            stroke: function(d) {
                                return d.id === "box" ? "blue" : "green";
                            },
                            strokeDasharray: "10",
                            strokeWidth: 2
                        },
                        {
                            data: [
                                {
                                    x: 'Jul 2012',
                                    y: 20000000,
                                    width: 100,
                                    height: 25
                                }
                            ],
                            fill: "#0c1971",
                            label: "Start Date",
                            labelConfig: {
                                textAnchor: "middle",
                                verticalAlign: "middle"
                            },
                            shape: "Rect"
                        },
                        {
                            data: [
                                {
                                    x: 'Nov 2017',
                                    y: 20000000,
                                    width: 10,
                                    height: 25
                                }
                            ],
                            fill: "#255832",
                            label: "End Date",
                            labelConfig: {
                                textAnchor: "middle",
                                verticalAlign: "middle"
                            },
                            shape: "Rect"
                        }
                    ]
                })
                .render()

What happens is that when I just have the Start Date item, it works fine, but when I add the End Date object, the first one disappears, and the second one isn't fully rendered.

According to the docs, annotations accepts

custom config objects for the Shape class, either a single config object or an array of config objects.`,

which is what I've provided, so I'm not sure where the problem is. What do I need to change to get all of my labels to appear properly?

Answer 1

I was able to figure it out based on this comment. The gist is that you have to combine all items of a particular Shape into one object:

                    annotations: [
                        {
                            data: [
                                {id: "start", x: "Jul 2012", y: 8000000},
                                {id: "start", x: "Jul 2012", y: 20000000},
                                {id: "end", x: "Nov 2017", y: 8000000},
                                {id: "end", x: "Nov 2017", y: 20000000},
                                {id: "dotted", x: "Sep 2011", y: this.item.ceilingValue},
                                {id: "dotted", x: "Nov 2018", y: this.item.ceilingValue}
                            ],
                            shape: "Line",
                            stroke: function(d) {
                                return d.id === "box" ? "blue" : "green";
                            },
                            strokeDasharray: "10",
                            strokeWidth: 2
                        },
                        {
                            data: [
                                {
                                    id: 'start',
                                    label: 'Start Date',
                                    x: 'Jul 2012',
                                    y: 20000000,
                                    width: 100,
                                    height: 25
                                },
                                {
                                    id: 'end',
                                    label: 'End Date',
                                    x: 'Nov 2017',
                                    y: 20000000,
                                    width: 100,
                                    height: 25
                                }
                            ],
                            fill: function(d) {
                                let result;
                                switch (d.id) {
                                    case 'start':
                                        result = "#0c1971";
                                        break;
                                    case 'end':
                                        result = "#255832";
                                        break;
                                }
                                return result;
                            },
                            label: function (d) {
                                let result;
                                switch (d.id) {
                                    case 'start':
                                        result = "Start Date";
                                        break;
                                    case 'end':
                                        result = "End Date";
                                        break;
                                    }
                                    return result;
                                },
                            labelConfig: {
                                textAnchor: "middle",
                                verticalAlign: "middle"
                            },
                            shape: "Rect"
                        }
                    ]