同一个 <div> 中的不同图表与 d3.js答案

【问题标题】：Different charts in same <div> with d3.js同一个 <div> 中的不同图表与 d3.js
【发布时间】：2013-03-26 16:38:33
【问题描述】：

在我第一次使用库d3.js 时，我发现了一个我不知道如何解决的问题。我正在尝试表示我从同一 <div> 中的一个 Web 服务收到的数据。它是这样工作的：

用户在下拉菜单中选择一个日期。
用户点击按钮。
向服务器请求。
（如果一切顺利）使用 JSON 数据进行响应。
在图表中表示数据

这可以在同一页面中重复多次并且图表应该更新。

我试图在同一个 div 中表示这些图表。这是 HTML：

<html>
<head></head>
<body>

<div id="featured-results">
User message I want to remove
</div>
<div id="featured-content">
</div>
</body>
</html>

这里是javascript代码：

<script type="text/javascript">
function test(){                                
    var ip = location.host;
    var data = [];
    var req = $.ajax({
        url: 'http://...' ,
        type: 'GET',
        contentType: 'application/json',
        cache: 'true',
        success: function(response){
            data = response;
        }
    });
    $.when(req).done(function(){
        var barWidth = 9;
        var width = 950;
        var height = 350;

        var x = d3.scale.linear().domain([0, 96]).range([0, width]);
        var y = d3.scale.linear().domain([0, 1000]).rangeRound([1, height - 50]);

        d3.select("#featured-results").remove();                           

        var chart = d3.select("#featured-content")
            .append("svg:svg")
            .attr("width", width)
            .attr("height", height);

        chart.selectAll("rect")
            .data(data.values)
            .enter()
            .append("svg:rect")
            .attr("x", function(datum, index){return x(index);})
            .attr("y", function(datum){return height - y(datum.energy);})
            .attr("height", function(datum){return y(datum.energy);})
            .attr("width", barWidth)
            .attr("fill", "#2d578b");                                        
     });
}
</script>

此代码删除了一个 div，我在其中向用户显示一条消息，并在 <div id="featured-content"> div 中表示图表，但是当我请求新图表时，新图表将附加到 div 中，然后我看到两个、三个、. ..

我该怎么做？这是任何“最佳实践”吗？谢谢

更新：如果我删除所有 svg 不代表当前图表

d3.select("#featured-results").remove();

d3.selectAll("svg:svg").remove();
var chart = d3.select("#featured-content") 
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height);

chart.selectAll("rect")
    .data(data.values)
    .enter()
    .append("svg:rect")
    .attr("x", function(datum, index){return x(index);})
    .attr("y", function(datum){return height - y(datum.energy);})
    .attr("height", function(datum){return y(datum.energy);})
    .attr("width", barWidth)
    .attr("fill", "#2d578b");

【问题讨论】：

您可以在添加新元素之前删除所有现有的svg 元素。
是的，但是怎么做？像这样：d3.selectAll("svg:svg").remove();?
是的。或者只是d3.select("svg:svg").remove();，因为一次应该只有一个，对吧？
但对我不起作用。它不会加载我想要代表的svg。
你的意思是它不显示新数据？在添加新元素之前，您必须删除 svg 元素。

标签： javascript html d3.js

【解决方案1】：

通常的方法是用show() 和hide() 切换两个divs 的可见性。

使用 d3.js 加载新内容将附加到任何现有内容。如果您不想这样，请使用d3.select("#featured-content").html('');。

【讨论】：

但是在同一个 div 中附加图表...不是用另一个替换一个。
啊。在调用 d3.js 之前，在第二个 div 上调用 .empty()
抱歉，我刚刚注意到您没有使用 jQuery。改用div.html('');