1

我正在尝试使用 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);
4

0 回答 0