0
我想通过形状的名字来链接圆形和矩形，没关系。为什么形状不能被拖拽d3.js
我也删除了强制布局，因为我想使用静态位置。
但拖动功能不起作用，只有链接可以被拖动，而不是形状。我不知道原因。
有人帮我查看代码吗？
非常感谢。
var graph = {
"nodes":[
{
"appId":"AP110358",
"name":"Customer Account Profile",
"type":"CIRCLE",
"x":50,
"y":50
},
{
"appId":"NB",
"name":"NB",
"type":"CIRCLE",
"x":500,
"y":500
},
{
"appId":"AP114737",
"name":"RBG",
"type":"CIRCLE",
"x":300,
"y":600
},
{
"appId":"NULL",
"name":"Account",
"type":"RECT",
"x":400,
"y":700
}
],
"links":[
{
"source":"Customer Account Profile",
"target":"NB",
"value":1,
"label":null
},
\t {
"source":"NB",
"target":"RBG",
"value":1,
"label":null
},
\t {
"source":"RBG",
"target":"Customer Account Profile",
"value":1,
"label":null
},
\t {
"source":"NB",
"target":"Customer Account Profile",
"value":1,
"label":null
},
\t {
"source":"Customer Account Profile",
"target":"Account",
"value":1,
"label":null
},
\t {
"source":"NB",
"target":"Account",
"value":1,
"label":null
},
\t {
"source":"RBG",
"target":"Account",
"value":1,
"label":null
}
]
};
var width = window.innerWidth;
var height = window.innerHeight;
var center;
if(width > 1200){
\t center = [(width-1200)/2, 0]
}else{
\t center = [0, 0]
}
var edges = [];
graph.links.forEach(function(e) {
var sourceNode = graph.nodes.filter(function(n) {
return n.name === e.source;
})[0],
targetNode = graph.nodes.filter(function(n) {
return n.name === e.target;
})[0];
edges.push({
\t source: sourceNode,
\t target: targetNode,
\t value: e.value
\t });
});
var color = d3.scale.category20();
var svg = d3.select("body")
.append("svg")
.attr("width", "1200")
.attr("height", "1000")
.attr("transform", "translate(" + center + ")")
.append("g");
var container = svg.append("g");
var link = container.append("g")
.attr("class", "links")
.selectAll(".link")
.data(edges)
.enter().append("line")
.attr("class", "link")
.attr("x1", function(l) {
var sourceNode = graph.nodes.filter(function(d) {
return d == l.source
})[0];
d3.select(this).attr("y1", sourceNode.y);
return sourceNode.x
})
.attr("x2", function(l) {
var targetNode = graph.nodes.filter(function(d) {
return d == l.target
})[0];
d3.select(this).attr("y2", targetNode.y);
return targetNode.x
\t })
.style("stroke-width", function(d) {
\t return d.value;
});
link.append("title").text(function(d) {
\t return d.value;
});
var drag = d3.behavior.drag()
.on("drag", function(d, i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("cx", d.x).attr("cy", d.y);
link.each(function(l) {
if (l.source == d) {
d3.select(this).attr("x1", d.x).attr("y1", d.y);
} else if (l.target == d) {
d3.select(this).attr("x2", d.x).attr("y2", d.y);
}
});
});
var node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(drag);
var i = 0;
node.each(function(d) {
if (d.type == "CIRCLE") {
\t d3.select(this).append("circle")
\t .attr("r", 50)
\t .attr("cx", function(d) {
\t \t return d.x
\t })
\t .attr("cy", function(d) {
\t \t return d.y
\t })
\t .style("fill", function(d) { return color(i & 3);});
\t
\t d3.select(this).append("text")
\t .text(function(d) {
\t \t return d.name;
\t })
\t .attr("transform", function(d) {
\t \t return "translate(" + d.x + "," + (d.y+5) + ")";
\t })
\t .style("text-anchor","middle");
} else {
\t d3.select(this).append("rect")
\t .attr("height", 40)
\t .attr("width", 140)
\t .attr("x", -10)
\t .attr("y", -(40/2))
\t .attr("transform", function(d) {
\t \t return "translate(" + d.x + "," + (d.y+5) + ")";
\t })
\t .style("fill", "green");
\t d3.select(this).append("text")
\t .text(function(d) {
\t \t return d.name;
\t })
\t .style("text-anchor","start")
\t .attr("transform", function(d) {
\t \t return "translate(" + (d.x - 5) + "," + (d.y+10) + ")";
\t });
}
i++;
});
node.on("click", function(d){
\t console.log(d.x + "|--|" + d.y);
});<style type="text/css">
.node {
stroke: #fff;
stroke-width: 1.5px;
cursor: move;
}
.node-active {
stroke: #555;
stroke-width: 1.5px;
}
.link {
stroke: #555;
stroke-opacity: .3;
}
.link-active {
stroke-opacity: 1;
}
.overlay {
fill: none;
pointer-events: all;
}
</style><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body style="background-color: #42f4e5">
<!-- <a href="/visualization/main">main</a> -->
</body>