d3.js svg не изменяет размер

Question

Я пытаюсь использовать свой собственный источник данных с облаком слова existing bl.ocks demonstration. Here's what I've done, и, как вы можете видеть, текст/блок довольно маленький. Я пытаюсь изменить размер SVG и облако слова элементов, чтобы занять всю ширину экрана, но до сих пор я не получаю желаемый ответ от корректировки размера этих элементов:

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

Вам необходимо увеличить смещение позиции здесь:

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

к чему-то вроде:

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

это связано с размером облака.

Однако обратите внимание, что если вы хотите поместить облако в окно, вам нужно будет учитывать размеры окна и обновить границы при изменении, как предлагается @Zhenyang Hua

Answer 2

svgКогда вы создаете свой svg, ширина присваивается атрибуту svg as, а не стилю.

Поэтому, когда размер контейнера изменяется, атрибут svg width должен быть проинформирован.

Что вы могли бы сделать, это создать что-то вроде этого:

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

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

Это часть кода в моем проекте, вы должны имитировать его.