行之前也包含了jQuery
我有以下结构-
<body style="font-family: Arial;border: 0 none;">
<button id="kejriwal" onclick = "drawVisualization()">Aam Aadmi Party</button>
<button id="modi" onclick = "drawVisualizationBjp()">Bharatiya Janata Party</button>
<button id="gandhi" onclick = "drawVisualizationCongress()">Indian National Congress</button>
<div id="visualization" style="width: 600px; height: 400px; float: left;"></div>
<div id="chart_aap" style="width: 600px; height: 400px; float:left; display: none;">
<svg id="chartsvg_aap"></svg>
</div>
<div id="chart_bjp" style="width: 600px; height: 400px; float:left; display: none;">
<svg id="chartsvg_bjp"></svg>
</div>
<div id="chart_cong" style="width: 600px; height: 400px; float:left; display: none;">
<svg id="chartsvg_cong"></svg>
</div>
</body>
chart_*div用于标记云。现在的问题是，每当我点击其中一个按钮两次，标记云就会被写在前一个标记云的顶部。我该如何阻止这一切?下面是创建标记cloud -
的函数function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable({{words_aap|safe}});
div.selectAll("*").remove();
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Maximum frequency words in tweets for Aam Aadmi Party",
width:600, height:400,
vAxis: {title: "Words"},
hAxis: {title: "Count"}}
);
var fill = d3.scale.category20();
var employees= {{imp_words_aap|safe}}
console.log(employees)
d3.layout.cloud().size([900 , 900])
.words(employees.map(function(d) {
return {text: d.y, size: d.x, color: d.z, tweets: d.w};
}))
.padding(5)
.rotate(function() { return 0; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
document.getElementById('chart_cong').style.display = 'none';
document.getElementById('chart_bjp').style.display = 'none';
var aap_div = document.getElementById("chart_aap");
aap_div.style.display = aap_div.style.display === 'none' ? '' : 'none';
d3.select("#chart_aap svg")
.attr("width", 900)
.attr("height", 900)
.append("g")
.attr("transform", "translate(400,275)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d) { console.log(d.color); return d.color; })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
}
注意-可视化div正在使用谷歌图表创建一个简单的条形图。
可能是因为您总是在绘图时将元素附加到"#chart_aap svg"中?您应该尝试$('#chart_aap svg g').remove();假设在d3.select("#chart_aap svg") ....