我没有在标题中正确解释这个问题......对不起。
我正在关注 D3 标签云简单示例 https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html
我有一个 JSON 文件,其中包含推文标签、情感值和推文文本;(摘抄)
var words = [{"word":"disgrace","sentiment":"0.975","tweet":"Wheres Fred the weatherman? \nIn jail #disgrace #dirtyman @MrJimmyCorkhill"},{"word":"dirtyman","sentiment":"0.975","tweet":"Wheres Fred the weatherman? \nIn jail #disgrace #dirtyman @MrJimmyCorkhill"}];
我想将“tweet”值用作每个“文本”元素的“标题”元素。我尝试通过将我的推文放入 .words 函数(或 .map,我不知道:s)来做到这一点,因为其他数据是通过这种方式访问的,但我无法提取我的“推文”数据;
var fill = d3.scale.category20();
var words = <?php echo $tweets->getTweetTags(); ?>;
d3.layout.cloud().size([1000, 1000])
.words(words.map(function(d) {
return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))
.rotate(function() { return ~~(Math.random() * 2) * Math.random() * 1; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("#vis").append("svg")
.attr("width", 1000)
.attr("height", 1000)
.append("g")
.attr("transform", "translate(500,400)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; })
.append("svg:title").text(function(d) { return d.tweet; } );
}
d.tweet 返回未定义
我大概可以理解为什么我不能在 .words 或 .map 函数中使用我的推文,因为它们只需要某些参数,但我不知道如何将“推文”数据放入“标题”标签中每个“文本”元素。
谁能帮我这个?
编辑:带有内部 d3.json 函数的代码;
var data; // a global
d3.json("../../../assets/json/tweetTags.json", function(error, json) {
if (error) return console.warn(error);
data = json;
var fill = d3.scale.category20();
d3.layout.cloud().size([1000, 1000])
.words(data.map(function(d) {
return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))
.rotate(function() { return ~~(Math.random() * 2) * Math.random() * 1; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(data) {
d3.select("#vis").append("svg")
.attr("width", 1000)
.attr("height", 1000)
.append("g")
.attr("transform", "translate(500,400)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; })
.append("svg:title").text(function(d) { return d.tweet; } );
}
d3.layout.cloud().size([300, 300])
.data.map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
})
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
});
我不知道如何让它像那样工作。我已经制作了 json 文件,但现在我无法访问数据或运行云。
编辑:文本元素现在附加在结束正文标记之外:(
var data; // a global
d3.json("../../../assets/json/tweetTags.json", function(error, json) {
if (error) return console.warn(error);
data = json;
var fill = d3.scale.category20();
d3.select("#vis").append("svg")
.attr("width", 1000)
.attr("height", 1000)
.append("g")
.attr("transform", "translate(500,400)")
.data(json)
.enter().append("text")
.style("font-size", function(d) { return d.sentiment * 40 + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.text(function(d) {return d.word;})
.append("svg:title").text(function(d) { return d.tweet; } );
});
编辑:@Chris这是您在 D3 json 函数中的示例代码以及我的自定义
d3.json("../../../assets/json/tweetTags.json", function(error, json) {
if (error) return console.warn(error);
var fill = d3.scale.category20();
d3.layout.cloud().size([600, 500])
.words(json.map(function(d) {;
return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))
.rotate(function(d) { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", 600).attr("height", 500)
.append("g").attr("transform", "translate(350,350)")
.selectAll("text").data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; }).append("svg:title")
.text(function(d) { return d.tweet; } );
}
})
但我无法从绘图功能访问 d.tweet :s