ライブラリd3.jsを使った最初の作業で、解決方法がわからない問題が1つ見つかりました。同じで1つのWebサービスから受け取ったデータを表現しようとしています<div>。それはそのように機能します：
- ユーザーはドロップダウンメニューで1つの日付を選択します。
- ユーザーがボタンをクリックします。
- サーバーへのリクエスト。
- （すべてがうまくいった場合）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で表す1つのdivを削除しますが <div id="featured-content">、新しいグラフを要求すると、新しいグラフがdivに追加され、2、3、...が表示されます。
どうやってやるの？そのための「ベストプラクティス」はありますか？ありがとう
更新：すべての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");