Question

在我第一次使用库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");

Answer 1

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

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

同一<div>中的不同图表与d3.js </div>

1 个答案: