D3plus 线图上的多个形状注释

问题描述

我有一个使用 d3plus 创建的线图，我需要有多个线注释（一个水平和两个垂直）和 Shape 标签来识别它们。我能够正确显示线条，但无法在图表上显示多个标签。

这是我的一组数据：

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

这是我的 LinePlot annotations 数组。

            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",y: 20000000},{id: "end",x: "Nov 2017",{id: "dotted",x: "Sep 2011",y: this.item.ceilingValue},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',width: 10,fill: "#255832",label: "End Date",shape: "Rect"
                        }
                    ]
                })
                .render()

发生的情况是，当我只有 Start Date 项时，它工作正常，但是当我添加 End Date 对象时，第一个消失了，而第二个没有完全呈现。

根据文档，annotations 接受

Shape 类的自定义配置对象，可以是单个配置对象或配置对象数组。`,

这是我提供的，所以我不确定问题出在哪里。我需要更改哪些内容才能正确显示所有标签？

解决方法

我能够根据 this comment 算出来。要点是您必须将特定形状的所有项目组合成一个对象：

                    annotations: [
                        {
                            data: [
                                {id: "start",x: "Jul 2012",y: 8000000},{id: "start",y: 20000000},{id: "end",x: "Nov 2017",{id: "dotted",x: "Sep 2011",y: this.item.ceilingValue},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',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"
                        }
                    ]