Слово d3.js отсутствует в облаке слов

js и пытаюсь создать базу данных Word Cloud на примере кода из [здесь]: https://github.com/jasondavies/d3-cloud. То, что я пытаюсь сделать, это размер шрифта слов, основанный на частоте слов в массиве. Например, у меня есть [a,a,a,b,b], поэтому слово «a» будет больше, чем «b», но проблема в том, что когда ширина или высота слова больше, чем ‹svg>, слово будет уйти.

layout = d3.layout.cloud().size([w, h])
    .words(frequency_list)
    .padding(5)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font(d3.select("#font").property("value"))
    .fontSize(function(d) { return (d.freq*wordSize); })
    .spiral(d3.select("input[name=spiral]:checked").property("value"))
    .on("end",draw)
    .start();

Я думаю, что сначала нужно получить ширину и высоту элемента, а затем соответствующим образом настроить wordSize, но, похоже, я не могу сделать это с [d3.layout.cloud.js]:https://github.com/jasondavies/d3-cloud/blob/master/d3.layout.cloud.js Может ли кто-нибудь помочь мне с этим?


javascript svg d3.js word-cloud
person yk1007    schedule 20.10.2014    source источник
comment
вот мой код plnkr.co/edit/g4lAuHIu4byHKC83ru1I?p=preview   -  person yk1007    schedule 20.10.2014

Ответы (1)


arrow_upward
3
arrow_downward

Масштабируйте размер предпочтительно в диапазоне от 10 до 95. 95, потому что 100 вызывало исчезновение самого большого шрифта, а шрифты меньше 10 были слишком маленькими.

 var sizeScale = d3.scale.linear()
                   .domain([0, d3.max(frequency_list, function(d) { return d.freq} )])
                                    .range([10, 95]); // 95 because 100 was causing stuff to be missing

...

    .fontSize(function(d) { return sizeScale(d.freq); })

Обновлен код на странице http://plnkr.co/edit/gNtHZ0lMRTP98mptm3W8?p=preview.

person Vivek Kumar    schedule 27.12.2014