我正在研究d3.js 的强制布局，
我已经定义了节点和链接。但是节点具有属于形状类型rect和circle的参数。因此，我想读取节点数据并相应地绘制它们。当我检查 DOM 时，我可以看到 circle 和 rect 元素，但它们没有显示在屏幕上。节点的链接正在显示。
我在 Windows 10 机器上使用 Chrome。
提供jsbin链接供参考。基于数据动态创建节点形状类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.node {
fill: #ccc;
stroke: #fff;
stroke-width: 2px;
}
.link {
stroke: #777;
stroke-width: 2px;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js">
</script>
</head>
<body>
<script type="text/javascript">
var width = 600,
height = 500;
var graph = {
"nodes": [ { "x": 80, "y": 20, "height": 30, "width": 30, "color" : "blue" },
{ "x": 595.98896, "y": 56.377057 },
{ "x": 319.568434, "y": 278.523637 },
{ "x": 214.494264, "y": 214.893585 },
{ "x": 130, "y": 20, "height": 30, "width": 30, "color" : "red" },
{ "x": 84.078465, "y": 192.021902 },
{ "x": 196.952261, "y": 370.798667 },
{ "x": 107.358165, "y": 435.15643 }
],
"links": [ { "target": 0, "source": 1 },
{ "target": 0, "source": 2 },
{ "target": 0, "source": 3 },
{ "target": 4, "source": 0},
{ "target": 6, "source": 4 },
{ "target": 7, "source": 4 },
{ "target": 5, "source": 4 }
]
};
var nodes = graph.nodes,
links = graph.links;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links);
force.linkDistance(width/2);
var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', 'link');
// Each node is drawn as a circle or rect based on the data.
var node = svg.selectAll('.node')
.data(nodes)
.enter()
.append(function(d,i){
if(d.height){
//debugger;
return document.createElement("rect");
}
else
return document.createElement("circle");
})
.attr('class', 'node');
force.on('end', function() {
var circles = svg.selectAll('circle');
//console.log(circles);
var circleAttributes = circles
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", function (d) { return 12; });
var rectangles = svg.selectAll('rect');
//console.log(rectangles);
var rectangleAttributes = rectangles
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.attr("height", function (d) { return d.height; })
.attr("width", function (d) { return d.width; })
.style("fill", function(d) { return d.color; });
link.attr('x1', function(d) { return d.source.x; })
.attr('y1', function(d) { return d.source.y; })
.attr('x2', function(d) { return d.target.x; })
.attr('y2', function(d) { return d.target.y; });
});
force.start();
</script>
我相信你不能append像在你的例子中那样通过创建元素有条件地。（或者至少我还没有找到这样的例子）
一个简单但可能不是一个优雅的解决方案是这样的（jsbin）：
// create a group element to hold the data
var node = svg.append('g')
.selectAll('.node')
.data(nodes)
.enter()
.append('g')
// filter the rectangles and the circles
var rects = node.filter(function(d){ return d.height!=undefined;}) // or simply return d.height
var circles = node.filter(function(d){ return d.height==undefined;}) // and return !d.height
// append circle or rect on the filtered values and go on from that
circles.append('circle')
.attr('class', 'node');
rects.append('rect')
.attr('class', 'node');
希望这可以帮助！祝你好运！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句