Question

我正在使用d3js v4创建一个气泡图。我有一个1000像素的宽度和500像素的高度svg我希望气泡水平分布，同时按类别分组。为了让他们分组，我正在使用分层。当我使用包布局时，它会使圆圈以圆形图案展开，因此受到高度的限制。

如何更加水平地分配气泡？

这是我的代码：

        let svg = d3.select('svg#circle'),
            width = 1000,
            height = +svg.attr('height');
        svg.attr('width', width);

        let stratify = d3.stratify()
            .id((d: any) => d.name)
            .parentId(function(d: any) { return d.categoryId; });

        let pack = d3.pack()
            .size([width, height])
            .padding(20);

        let root = stratify(this.subcategoryData)
            .sum(function(d: any) { return d.total; })
            .sort(function(a: any, b: any) { return b.total - a.total; });

        let node = svg.selectAll('.node')
                .data(pack(root).leaves())
                .enter().append('g')
                .attr('class', 'node')
                .style('text-anchor', 'middle')
                .attr('transform', function(d: any) { return 'translate(' + d.x + ',' + d.y + ')'; });

            let div = d3.select('body').append('div')
                .attr('class', 'tooltip')
                .style('opacity', 0);

            node.append('circle')
                .attr('id', function(d: any) { return d.id; })
                .attr('r', function(d: any) { return d.r; })
                .attr('class', (d: any) => `circle-${d.data.categoryId}`);

Answer 1

你是否试图像这样增加X翻译：

.attr('transform', function(d: any) { return 'translate(' + d.x * 1.5 + ',' + d.y + ')'; });

乘以d.x应该扩展圆圈。也许如果它不能与1.5一起尝试更多的东西。

希望我帮助过。

如何在d3js v4中水平分配气泡图

1 个答案: