0

我正在使用d3Plus来显示一些线图，并且我有一些注释，包括矩形和线。bootstrap-vue用于 CSS，我想通过向形状添加.d-none .d-lg-block类来隐藏移动设备上的形状。根据（令人难以置信的稀疏）文档，我应该能够使用 Shape 配置中的activeStyle属性来执行此操作。

但是，当我尝试将值作为字符串或返回对象的函数返回时，它似乎没有被访问。

                    annotations: [
                        {
                            data: [
                                {
                                    id: 'awardDate',
                                    x: this.plotData.annotations.awardDate,
                                    y: this.plotData.annotations.ceilingValue * .90,
                                    width: 90,
                                    height: 40
                                },
                                {
                                    id: 'ultimateCompletionDate',
                                    x: this.plotData.annotations.ultimateCompletionDate,
                                    y: this.plotData.annotations.ceilingValue * 1.11,
                                    width: 150,
                                    height: 40
                                },
                                {
                                    id: 'ceilingValue',
                                    x: this.plotData.ceilingAnnotationDate,
                                    y: this.plotData.annotations.ceilingValue * 1.11,
                                    width: 85,
                                    height: 40
                                }
                            ],
                            fill: '#000',
                            rx: '.25rem',
                            ry: '.25rem',
                            stroke: '#fff',
                            label: function (d) {
                                let result;
                                switch (d.id) {
                                    case 'awardDate':
                                        result = "Award Date " + vm.formatDate(vm.plotData.annotations.awardDate);
                                        break;
                                    case 'ultimateCompletionDate':
                                        result = "Ultimate Completion Date " + vm.formatDate(vm.plotData.annotations.ultimateCompletionDate);
                                        break;
                                    case 'ceilingValue':
                                        result = "Ceiling Value " + formatCurrency(vm.plotData.annotations.ceilingValue);
                                        break;
                                }
                                return result;
                            },
                            labelConfig: {
                                textAnchor: "middle",
                                verticalAlign: "middle",
                                fontResize: true,
                            },
                            shape: "Rect",
                            activeStyle: function(d) {
                                return {"border": "10px solid green"};
                            },
                            hoverStyle: function(d) {
                                return {color: "red"};
                            },
                            hoverOpacity: function(d) {
                                return ".25"
                            }
                        },
                    ]

此对象中的其他 Shape 配置选项（fill、rx、ry、stroke等）工作正常，所以我不知道为什么这些不是。

我需要做什么才能使用我的类来隐藏形状？

4

0 回答 0