0
我有以下結構 -如何重新加載svg的內容？
<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被用於標籤雲。現在的問題是，無論何時我點擊其中一個按鈕，標籤雲會被寫在前一個標籤雲的頂部。我該如何阻止？這是創建標籤雲的功能 -
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使用google圖表創建簡單的條形圖。我沒有遇到任何問題。