如何将 d3-selection-multi 添加到 d3？

Question

我喜欢 d3 V4 让我觉得自己完全无能的能力。我似乎无法弄清楚如何在 webpack 中制作我自己的自定义包以及我的其他模块......所以我只是尝试使用 vanilla d3 包并为其添加多选功能。

我在 Angular 2 中创建了一个 d3 服务，以在我的组件之间依赖注入 d3 对象。

import {Injectable} from "@angular/core";

import * as d3 from "d3";
import "d3-selection-multi";
export type D3 = typeof d3;

@Injectable()
export class D3Service {
    constructor() {
    }

    private d3: D3 = d3;

    getD3 = () => {
        return this.d3;
    };
}

一切都很好，直到我尝试访问多项选择功能，例如使用 .attrs

let test = this.d3.select("body").styles({
            "background-color": "#F00",
            "color": "#00F"
        });

我的浏览器抱怨它不知道 .attrs 是什么。

error_handler.js:47 例外：未捕获（承诺中）：错误：错误 ./ListingComponent 类ListingComponent_Host - 内联模板：0:0 引起：this.d3.select(...).styles is not a function TypeError: this.d3.select(...).styles 不是函数

我也尝试将这两个项目与Object.assign 合并，但无济于事。

我做错了什么？这可能是愚蠢的微不足道的事情。

Answer 1

没有名为 d3.styles 的函数。请试试这个。

this.d3.select("body").style("background-color", "#F00")
                      .style("color", "#00F");