Question

我有以下结构 -

<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正在使用谷歌图表创建一个简单的条形图。我没有遇到任何问题。

Answer 1

可能是因为在绘图时你总是将元素附加到“#chart_aap svg”中？您应该尝试类似$('#chart_aap svg g').remove();之类的内容，假设您在行d3.select("#chart_aap svg")之前也包含了jQuery ....

如何重新加载svg的内容？

1 个答案: