/**
* 绘图
* @param svg
* @param roomInfos 房屋信息
*/
function draw(svg, roomInfos)
{
drawRoom(svg, roomInfos);
drawRoomText(svg, roomInfos);
}
/**
* 展示房屋
* @param svg dom
* @param roomInfos
*/
function drawRoom(svg, roomInfos) {
svg.selectAll(".MyRect")
.data(roomInfos)
.enter()
.append("rect")
.attr("class", "MyRect")
.attr("x", function(d, i) {
return d.localtionX;
}).attr("y", function(d, i) {
return d.localtionY;
}).attr("width", function(d, i) {
return d.width;
}).attr("height", function(d, i) {
return d.height;
}).attr("style", function(d, i) {
return d.state ? "stroke:green;" : "stroke:red";
}).on("mouseover",function(d,i){
console.log("mouseover on:"+d.name);
}).on("mouseout",function(d,i){
console.log("mouseout on:"+d.name);
});
}
/**
* 展示房间名
* @param svg
* @param roomInfos
*/
function drawRoomText(svg, roomInfos) {
// 添加文字元素
svg.selectAll(".MyText")
.data(roomInfos)
.enter()
.append("text")
.attr("class", "MyText")
.attr("x", function(d, i) {
return d.localtionX;
}).attr("y", function(d) {
return d.localtionY;
}).attr("dx",function(d, i) {
//字体居中
var tempScale = d3.scale.ordinal().domain(d3.range(1))
.rangeRoundBands([ d.localtionX, d.localtionX + d.width ]);
return tempScale.rangeBand() / 2;
}).attr("dy",function(d) {
var tempScale = d3.scale.ordinal().domain(d3.range(1))
.rangeRoundBands([ d.localtionY, d.localtionY + d.height ]);
return tempScale.rangeBand() / 2;
}).text(function(d, i) {
return d.name;
})
;
}
作业
最新推荐文章于 2024-06-21 19:20:27 发布