Question

我正在尝试将自己的数据源与existing bl.ocks demonstration的文字云一起使用。 Here's what I've done，正如您所看到的，文本/块非常小。我正在尝试调整svg和word云元素的大小以占据屏幕的整个宽度，但到目前为止，我没有从调整这些元素的大小得到所需的响应：

 d3.layout.cloud().size([2000, 2000])
            .words(frequency_list)
            .rotate(0)
            .fontSize(function(d) { return 3*d.size; })
            .on("end", draw)
            .start();

    function draw(words) {
        d3.select("body").append("svg")
                .attr("width", 4000)
                .attr("height",2000)
                .attr("class", "graph-svg-component")
                .attr("class", "wordcloud")
                .append("g")
                // without the transform, words words would get cutoff to the left and top, they would
                // appear outside of the SVG area
                .attr("transform", "translate(320,200)")
                .selectAll("text")
                .data(words)
                .enter().append("text")
                .style("font-size", function(d) { return d.size + "px"; })
                .style("fill", function(d, i) { return color(i); })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.text; });
    }

如何让词云扩展我的屏幕的整个宽度？谢谢你的任何建议。

Answer 1

svg当你创建你的svg时，宽度被分配给svg作为属性，而不是样式。

因此，当您调整容器大小时，需要通知svg width属性。

你能做的就是创造这样的东西：

$(window).on('resize', resizeSvg);

    function resizeSvg() {
        svg.attr('width', $('#svg-container').width());
    }

这是我项目中代码的一部分，你应该模仿它。

Answer 2

您需要在此处增加位置偏移：

.attr("transform", "translate(320,200)")

类似于：

.attr("transform", "translate(500, 500)")

这与云的大小有关。

但是请注意，如果您想让云适应窗口，您必须考虑窗口的尺寸并按照@Zhenyang Hua

的建议更新更改的界限

d3.js svg没有调整大小

2 个答案: