d3.js - D3plus 线图上的多个形状注释

Question

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

这是我的一组数据：

[
  {"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}
]

这是我的 LinePlot注释数组。

            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()

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

根据文档，annotations接受

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

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

标签： d3.jsplotd3plus

Answer 1

我能够根据此评论弄清楚。要点是您必须将特定形状的所有项目组合到一个对象中：

                    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"
                        }
                    ]