我是d3js的新手，通过查看示例我尝试了一些东西，最后构建了一个图形，其中我使用了来自后端bean的json数据，并使用隐藏的jsf组件访问它并获得更新1秒。现在我想根据数据更新SVG。 ` //
$("#graphDiv").animate({
height : "toggle"
}, 2000, function() {
})
$("#graphDiv").css({
"display" : "block"
});
InitChart();
} else {
$("#graphDiv").css({
"display" : "none"
});
}
});
function InitChart() {
try {
var x=(${rawEventsMB.jsonString});
var data1=JSON.stringify(x);
var data = JSON.parse(data1);
var parseDate = d3.time
.format("%Y-%m-%d %H:%M:%S").parse;
bisectDate = d3.bisector(function(d) {
return d.time;
}).left;
data.forEach(function(d) {
d.time = parseDate(d.time);
d.count = +d.count;
});
var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 300, MARGINS = {
top : 20,
right : 20,
bottom : 20,
left : 50
},
xScale = d3.time.scale().domain(
[ d3.min(data, function(d) {
return d.time;
}), d3.max(data, function(d) {
return d.time;
}) ]).range(
[ MARGINS.left,
WIDTH - MARGINS.right ]),
yScale = d3.scale.linear()
.range([ HEIGHT - MARGINS.top,MARGINS.bottom ])
.domain(d3.extent(data, function(d) {return d.count;})),
xAxis = d3.svg.axis().scale(xScale)
.orient("bottom")
.ticks(10)
.tickFormat(d3.time.format("%d %b %X")),
yAxis = d3.svg.axis().scale(yScale)
.orient("left");
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform","translate(0,"+ (HEIGHT - MARGINS.bottom)+ ")")
.call(xAxis)
.selectAll("text").style("text-anchor","end")
.attr("dx","-.6em")
.attr("dy","-.55em")
.attr("transform","rotate(-90)"),
vis.append("text")
.attr("transform","translate("+ (WIDTH / 2)+ " ,"+ (HEIGHT + MARGINS.bottom*4)+ ")")
.style("text-anchor","middle")
.style("fill", "red")
.style("font-weight", "bold")
.text("Time");
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform","translate("+ (MARGINS.left)+ ",0)")
.call(yAxis),
vis.append("text")
.attr("transform","rotate(-90 "+ MARGINS.left* 1.4 + " "+ HEIGHT / 5 + ")")
.style("text-anchor", "middle")
.style("fill", "red")
.text("Number of events ")
.style("font-weight", "bold");
var focus = vis.append("g").style(
"display", "none");
focus.append("circle").attr("class", "y")
.style("fill", "blue").style(
"stroke", "blue").attr("r",
4);
/* focus.append("text").attr("class","y").style("text-anchor","middle")
.style("fill", "red").style("font-weight", "bold"); */
focus.append("foreignObject")
.attr("width", 180)
.attr("height", 500).style("font", "bold 11px 'Helvetica Neue'").style("fill", "red").attr("class", "tooltip");
// append the rectangle to capture mouse
vis.append("rect").attr("width", WIDTH)
.attr("height", HEIGHT).style(
"fill", "none").style(
"pointer-events", "all")
.on("mouseover", function() {
focus.style("display", null);
}).on("mouseout", function() {
focus.style("display", "none");
}).on("mousemove", mousemove);
var lineGen = d3.svg.line().x(function(d) {
return xScale(d.time);
}).y(function(d) {
return yScale(d.count);
}).interpolate("interpolation");
vis.append('svg:path').attr('d',
lineGen(data)).attr('stroke',
'green').attr('stroke-width', 2)
.attr('fill', 'none');
} catch (ex) {
alert(ex);
}
function mousemove() {
var formatTime = d3.time.format("%e %b %X");
var x0 = xScale.invert(d3.mouse(this)[0]), i = bisectDate(
data, x0, 1), d0 = data[i - 1], d1 = data[i], d2 = x0
- d0.time > d1.time - x0 ? d1 : d0;
focus.select("circle.y").attr(
"transform",
"translate(" + xScale(d2.time)
+ "," + yScale(d2.count)
+ ")"),
/* focus.select("text")
.attr("transform","translate(" + xScale(d2.time)+ "," + yScale(d2.count)+ ")"); */
focus.select("foreignObject").attr("transform","translate(" + xScale(d2.time)+ "," + yScale(d2.count)+ ")")
.html("time:"+formatTime(d2.time)+", <br/> " + "count:"+d2.count);
}
var myVar=setTimeout(function() { InitChart(); }, 1000);
}
});
//]]>
</script>`
在此之后我如何更新数据如果我更新了jsf组件，我最终得到的图形会重叠所有数据，轴等......任何人都可以帮助我。
我还有另一个问题，即使在使用window.ready of jquery
之后调用该函数时，浏览器控制台也显示“ReferenceError：InitChart（）未定义”答案 0 :(得分：0)
查看d3更新模式https://bl.ocks.org/mbostock/3808218
您需要将数据绑定代码与将属性.data()的路径追加到一个函数中，您可以在数据更新时调用该函数。
同时查看http://www.toptal.com/d3-js/towards-reusable-d3-js-charts这是构建d3图表的好方法