Question

我正在尝试使用d3来创建我家电监控的仪表板项目。我正在努力的地方是使用json并仅刷新部分数据。

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

json以下列格式返回当前的temparature： [{ “×”：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);

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

0 个答案: