D3.js的单词cloud不会显示而不显示错误消息

Question

我正在尝试用d3.js制作单词cloud，当我尝试调用page时，单词cloud不会显示。

然而，控制台中并没有错误消息，所以我不知道哪个部分是错误的。

数据集如下所示。

[{word: "happy", freq: 3}, {word: "apple", freq: 4}]

这是我的密码。

<div id="cloud"></div>
<style>
text:hover {
stroke: black;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/emeeks/3361332/raw/61cf57523fe8cf314333e5f60cc266351fec2017/d3.layout.cloud.js"></script>
<script type="text/javascript">
var weight = 3,
width = 960,
height = 500;
var fill = d3.scale.category20();
var data = {{ data|js }};
var result = scale(data);
function scale (data) {
var result = [];
for (var k in data){
var value = data[k];
result.push({word:value['word'], weight:+value['freq'] * weight});
}
return result;
}
d3.layout.cloud().size([width, height]).words(result)
.rotate(0)
.font("Impact")
.fontSize(function(data) { return data.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("#cloud").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(data) { return data.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(data, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(data) {
return "translate(" + [data.x, data.y] + ")rotate(" + data.rotate + ")";
})
.text(function(data) { return data.text; });
}

Answer 1

我注意到您的代码中有两个问题。

1( 当前用于计算每个节点权重的数据集中缺少freq属性。由于字体大小取决于权重属性，因此它变为0。

2( 结果数组包含关键字名称为word的对象。因此，您应该覆盖如下所示的云布局的文本方法，或者将密钥名称更新为text。

d3.layout.cloud()
..............
..............
.text(function(d) {
return d.word;
}) 

var weight = 3,
width = 960,
height = 500;
var fill = d3.scale.category20();
var data = [{
word: "happy",
weight: 10,
"freq": 8
}, {
word: "apple",
weight: 4,
"freq": 3
}, {
word: "wishes",
weight: 6,
"freq": 5
}, {
word: "sad",
weight: 5,
"freq": 2
}, {
word: "orange",
weight: 21,
"freq": 3
}, {
word: "condolence",
weight: 3,
"freq": 2
}];
var result = scale(data);
function scale(data) {
var result = [];
for (var k in data) {
var value = data[k];
result.push({
word: value['word'],
weight: +value['freq'] * weight
});
}
return result;
}
//console.log(result);
d3.layout.cloud().size([width, height]).words(result)
.rotate(0)
.font("Impact")
.text(function(d) {
return d.word;
})
.fontSize(function(data) {
return data.weight;
})
.on("end", draw)
.start();
function draw(words) {
d3.select("#cloud").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(data) {
return data.size + "px";
})
.style("font-family", "Impact")
.style("fill", function(data, i) {
return fill(i);
})
.attr("text-anchor", "middle")
.attr("transform", function(data) {
return "translate(" + [data.x, data.y] + ")rotate(" + data.rotate + ")";
})
.text(function(data) {
return data.text;
});
}

text:hover {
stroke: black;
}

<div id="cloud"></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/emeeks/3361332/raw/61cf57523fe8cf314333e5f60cc266351fec2017/d3.layout.cloud.js"></script>