d3.js使用json更新垂直条形图

我正在尝试使用d3来创建一个家庭电力监控仪表板 项目我正在努力使用json，只刷新部分数据

下面的脚本绘制了一个温度计。在这里，我使用带有svg环绕的垂直条形图来绘制温度计轮廓

json以以下格式返回当前温度： [{x:1354590256000，值：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); 

---

我不介意帮忙，但是这里的代码太多了，没有视觉效果。如果使用伪json数据提供一个工作的[jsFiddle]jsFiddle.net，您会做得更好。另外，也许我可以给你一些指导。我对这件事的感觉和meetamit一样，没有JSFIDLE或其他东西。不过要知道的一点是.enter、.update和.exit是选择。它们分别返回新的、正在更新的或正在删除的数据子集。