json - d3.jsがjsonで縦棒グラフを更新する

Question

d3 を使用して、自宅の電力監視プロジェクトのダッシュボードを作成しようとしています。私が苦労しているのはjsonで、データの一部だけを更新しています。

以下のスクリプトは、温度計を描画します。温度計の輪郭を描画するために、svg サラウンドを含む縦棒グラフを使用している場所。

json は現在の気温を次の形式で返します: [{"x":1354590256000,"value":18.6}]

ダイアグラム全体を再描画できます。棒グラフを 0 から再描画できます。値を最後の値から現在の値に遷移させることはできません。

どんな助けでもありがたく受け取りました！私は非常に多くのオンライン d3 更新の例 (barchart2 の例を解読しようとすることを含む) を見てきましたが、私の頭はぐるぐる回っています!

var chart = d3.select("#svgpathSVGdata");
var svg =  chart.append("svg:svg").
attr("width", 160).
attr("height", 300);

var g;
var update = function () {
d3.json(
'http://192.168.0.10/energy/lastvalue.php?id=36' ,
function(data) {

var x = d3.scale.linear().domain([0, data.length]).range([30, 160]);
var y = d3.scale.linear().domain([15, 30]).range([100 , 250 ]);

if (g)
g.remove();  

g = svg.append('svg:g')

g.selectAll("text").
  data(data).
  enter().
  append("svg:text").
  attr("x", 65).
  attr("y", 190).
  attr("text-anchor", "start").
 transition().delay(function (datum,index){ return index * 300;}).
 duration(1200).
  text(function(datum) { return datum.value +"\u00B0"+"c"; }).
  attr("class", "thermtemp");

g.selectAll('rect')
  .data(data)
  .enter()
 .append("rect")
  .attr("x", function(datum, index) { return x(index); })
  .attr("y", function(datum) { return 300 - 100 /*- y(datum.value)*/; })
  .attr("width", 25)
  .attr("fill", "#2d578b")
 .transition().delay(function (datum,index){ return index * 300;})
 .duration(1200)
 .attr("height", function(datum) { return y(datum.value)- 100; }) 
 .attr("y", function(datum) { return  (300 - y(datum.value)) ; });           

g.append("svg:text")
.attr("class", "thermsubtitle")
.attr("dy", ".71em")
.attr("text-anchor", "start")
.attr("transform", "translate(100,100)")
.attr("transform", "rotate(-90,100,95)") 
.text("Label");            

// THERMOMETER OUTLINE START           

g.append("svg:path")
  .attr("d","M 30 50 L 30 200   a25,25 0 1,0 25 0 L 55 50 M 30 50 a15,15 0 0 1 25 0")
  .style("stroke-linecap", "round")
  .style("stroke-width", 6)
  .style("stroke", "rgb(204,204,204)")
  .style("fill", "none")
  .style('shape-rendering', 'geometricPrecision')

g.append("svg:path")
  .attr("d","M 30 200  a25,25 0 1,0 25 0")
  .style("stroke-linecap", "round")
  .style("stroke-width", 6)
  .style("stroke", "rgb(204,204,204)")
  .style("fill", "steelblue")
  .style('shape-rendering', 'geometricPrecision')
  .style("fill-opacity", 0.6);

// THERMOMETER OUTLINE END            
}  );         
 }

update();


setInterval(function() {
//  data.shift();
 //data.push(next());
console.log("redraw");

d3.timer.flush();// avoid memory leak when in background tab
update();
}, 6500);