我想将Wordcloud添加为d3.js中创建的条形图的标签，我在网上看到了很多示例，但是每次失败都会无法将代码与现有代码合并。我想为我的条形图添加标签文件，自从4.5个小时以来，我对此感到震惊。任何帮助将不胜感激..谢谢
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.bar1 { fill: aqua; }
.bar2 { fill: deepskyblue; }
.bar3 { fill: steelblue; }
.bar:hover {fill: orange; }
.axis--x path { display: none; }
.line {
fill: none;
stroke: royalblue;
stroke-width: 3;
}
.dot {
fill: royalblue;
stroke: royalblue;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var dataset = [
['1963-66',703,1902],
['1967-69',1473,3341],
['1970-73',863,1935],
['1974-76',1494,3008],
['1977-80',965,1743],
['1981-83',568,1271],
['1984-86',189, 626],
['1987-89',464, 1064],
['1990-93',731, 1443],
['1994-96',306, 630],
['1997-99',899, 2556],
['2000-03',231, 880],
['2004-06',262, 589],
['2007-09',429, 1497],
['2010-13',322, 749],
['2014-16',315, 720]
];
var margin = {top: 200, right: 20, bottom: 30, left: 80},
width = 960,
height = 400;
var xScale = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(dataset.map(function(d) {
return d[0];
}));
yScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(dataset, (function (d) {
return d[2];
}))]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 40)
.attr("y", 250)
.attr("font-size", "14px")
.text("")
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// axis-x
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.append("text")
.attr("y", height - 250)
.attr("x", width - 900)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Drama");
g.append("g")
.append("text")
.attr("y", height - 272)
.attr("x", width - 900)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Comedy");
// axis-y
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
var bar = g.selectAll("rect")
.data(dataset)
.enter().append("g");
// bar chart
bar.append("rect")
.attr("x", function(d) { return xScale(d[0]); })
.attr("y", function(d) { return yScale(d[2]); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d[2]); })
.attr("class", function(d) {
var s = "bar ";
if (d[1] < 400) {
return s + "bar1";
} else if (d[1] < 800) {
return s + "bar2";
} else {
return s + "bar3";
}
});
// labels on the bar chart
bar.append("text")
.attr("dy", "1.3em")
.attr("x", function(d) { return xScale(d[0]) + xScale.bandwidth() / 2; })
.attr("y", function(d) { return yScale(d[2]); })
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black")
.text(function(d) {
return d[2];
});
// line chart
var line = d3.line()
.x(function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
.y(function(d) { return yScale(d[1]); })
.curve(d3.curveMonotoneX);
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("y", function(d,i){
return height -d -2;
})
.attr("x", function(d,i){
return width * i;
})
.attr("fill","#A64C38");
bar.append("path")
.attr("class", "line") // Assign a class for styling
.attr("d", line(dataset)); // 11. Calls the line generator
bar.append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
.attr("cy", function(d) { return yScale(d[1]); })
.attr("r", 5);
d3.select('body')
.append('p')
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black")
.text("This is Test");
</script>
</body>
</html>
和词云
<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<head>
<title>Word Cloud Example</title>
</head>
<style>
body {
font-family:"Lucida Grande","Droid Sans",Arial,Helvetica,sans-serif;
}
.legend {
border: 1px solid #555555;
border-radius: 5px 5px 5px 5px;
font-size: 0.8em;
margin: 10px;
padding: 8px;
}
.bld {
font-weight: bold;
}
</style>
<body>
</body>
<script>
var frequency_list = [{"text":"Action","size":40},{"text":"Adventure","size":15},{"text":"Thriller","size":10}];
var color = d3.scale.linear()
.domain([0,1,2,3,4,5,6,10,15,20,100])
.range(["#ddd", "#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"]);
d3.layout.cloud().size([200, 100])
.words(frequency_list)
.rotate(0)
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", 650)
.attr("height", 350)
.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(120,120)")
.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; });
}
</html>