Viewbow D3中的中心可視化

Question

我創建了一個D3可視化文件，但是在完成加載后，我的可視化文件不在中心：

我想要這個結果：

我使用Angular 5執行我的D3可視化。 我的數據已加載，可以正常工作，但是我的可視化位於左側而不是居中。 我想集中我的可視化。 我的代碼來自我的組件：

export class BrainPageHomeComponent implements OnInit, AfterViewInit, OnDestroy {

    public name: string;
    public svg;
    public color;
    public simulation;
    public link;
    public node;
    public miserables;
    public tooltip;

    constructor(
        private brainService: BrainService,
    ) {
    }

    ngOnInit() {

    }

    ngAfterViewInit() {
        this.loadBrain();
    }

    //Load Brain
    public loadBrain() {
        d3.select("svg").remove();

        this.brainService.getBrain().subscribe(
            data => {
                this.miserables = data['data'];

                this.svg = d3.select("body")
                    .append("svg")
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .call(d3.zoom().on("zoom", function () {
                        let g = d3.select('svg > g');

                        g.attr("transform", d3.event.transform);
                    }))
                    .append("g");


                let width  = +this.svg.attr("width");
                let height = +this.svg.attr("height");

                this.color = d3.scaleOrdinal(d3.schemeCategory20);

                this.simulation = d3.forceSimulation()
                    .force("link", d3.forceLink().id(function (d) {
                        return d.id;
                    }))
                    .force("charge", d3.forceManyBody())
                    .force("center", d3.forceCenter(width / 2, height / 2));

                this.render(this.miserables);
            },
            error => {
                console.log(error);
            });
    }

    ticked() {
        this.link
            .attr("x1", function (d) {
                return d.source.x;
            })
            .attr("y1", function (d) {
                return d.source.y;
            })
            .attr("x2", function (d) {
                return d.target.x;
            })
            .attr("y2", function (d) {
                return d.target.y;
            });

        this.node
            .attr("cx", function (d) {
                return d.x;
            })
            .attr("cy", function (d) {
                return d.y;
            });
    }

    render(graph) {
        let tooltip = d3.select("body")
            .append("div")
            .attr("class", "tooltip-message")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden");

        this.link = this.svg.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke-width", function (d) {
                return Math.sqrt(d.value);
            });

        this.node = this.svg.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(graph.nodes)
            .enter().append("circle")
            .attr("r", 5)
            .attr("fill", (d) => {
                return this.color(d.group);
            })
            //npm .on("click", function(d, i) { alert("Hello world"); })
            .on("mouseover", function(node){
                console.log(node);
                tooltip.text(node.title);
                return tooltip.style("visibility", "visible");
            })
            .on("mousemove", function(){return tooltip.style("top",
                (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
            .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
            .call(d3.drag()
                .on("start", (d) => {
                    return this.dragstarted(d)
                })
                .on("drag", (d) => {
                    return this.dragged(d)
                })
                .on("end", (d) => {
                    return this.dragended(d)
                }));

        this.node.append("title")
            .text(function (d) {
                return d.id;
            });

        this.simulation
            .nodes(graph.nodes)
            .on("tick", (nodes) => {
                return this.ticked()
            })
            .stop();

        this.simulation.force("link")
            .links(graph.links);

        this.simulation.restart();
    }

    dragstarted(d) {
        if (!d3.event.active) this.simulation.alphaTarget(0.3).restart();
        d.fx = d.x, d.fy = d.y;
    }

    dragged(d) {
        d.fx = d3.event.x, d.fy = d3.event.y;
    }

    dragended(d) {
        if (!d3.event.active) this.simulation.alphaTarget(0);
        d.fx = null, d.fy = null;
    }

    ngOnDestroy() {

    }

}

我嘗試了很多事情：

• 添加了viewBox屬性：

  this.svg = d3.select（“ body”）.append（“ svg”）.attr（“ width”，“ 100％”）.attr（“ height”，“ 100％”）.call（d3.zoom（ ）.on（“ zoom”，function（）{let g = d3.select（'svg> g'）;

    g.attr("transform", d3.event.transform); })) .attr("viewBox", "0 0 " + "100%" + " " + "100%" ) .attr("preserveAspectRatio", "xMidYMid meet"); .append("g"); 

• 添加了重啟模擬：

  this.simulation.restart（）;

但是我的可視化總是在左邊而不是在中心。

Answer 1

我解決了我的問題：

我更換了：

let width  = +this.svg.attr("width");
let height = +this.svg.attr("height");

創建人：

let width  = d3.select('svg').style("width");
let height = d3.select('svg').style("height");

width = width.substring(0, width.length - 2);
height = height.substring(0, height.length - 2);