为什么不能在d3.js中拖动形状

时间：2017-04-01 15:34:42

标签： 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
      },
	  {  
         "source":"NB",
         "target":"RBG",
         "value":1,
         "label":null
      },
	  {  
         "source":"RBG",
         "target":"Customer Account Profile",
         "value":1,
         "label":null
      },
	  {  
         "source":"NB",
         "target":"Customer Account Profile",
         "value":1,
         "label":null
      },
	  {  
         "source":"Customer Account Profile",
         "target":"Account",
         "value":1,
         "label":null
      },
	  {  
         "source":"NB",
         "target":"Account",
         "value":1,
         "label":null
      },
	  {  
         "source":"RBG",
         "target":"Account",
         "value":1,
         "label":null
      }
   ]
};
 var width = window.innerWidth;
 var height = window.innerHeight;
  var center;
if(width > 1200){
	center = [(width-1200) / 2, 0]
}else{
	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({
	 source: sourceNode,
	 target: targetNode,
	 value: e.value
	 });
 });


 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
	})
 .style("stroke-width", function(d) {
	return d.value;
 });

 link.append("title").text(function(d) {
	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") {
	 d3.select(this).append("circle")
	 .attr("r", 50)
	 .attr("cx", function(d) {
		 return d.x
	   })
	   .attr("cy", function(d) {
		 return d.y
	   })
	 .style("fill", function(d) { return color(i & 3);});
	 
	 d3.select(this).append("text")
	 .text(function(d) {
		return d.name;
	})
	.attr("transform", function(d) {
		 return "translate(" + d.x + "," + (d.y+5) + ")";
	 })
	.style("text-anchor","middle");
 } else {
	 d3.select(this).append("rect")
	 .attr("height", 40)
	 .attr("width", 140)
	 .attr("x", -10)
	 .attr("y", -(40 / 2))
	 .attr("transform", function(d) {
		 return "translate(" + d.x + "," + (d.y+5) + ")";
	 })
	 .style("fill", "green");
	 d3.select(this).append("text")
	 .text(function(d) {
		return d.name;
	 })
	 .style("text-anchor","start")
	 .attr("transform", function(d) {
		 return "translate(" + (d.x - 5) + "," + (d.y+10) + ")";
	 });
 }
 i++;
 });


 node.on("click", function(d){
	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>

1 个答案:

答案 0 :(得分：0)

我知道原因 我在节点中调用了drag方法，但节点没有附加形状，因此拖动不起作用。

所以我将拖动调用位置更改为片段

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
    },
    {
      "source": "NB",
      "target": "RBG",
      "value": 1,
      "label": null
    },
    {
      "source": "RBG",
      "target": "Customer Account Profile",
      "value": 1,
      "label": null
    },
    {
      "source": "NB",
      "target": "Customer Account Profile",
      "value": 1,
      "label": null
    },
    {
      "source": "Customer Account Profile",
      "target": "Account",
      "value": 1,
      "label": null
    },
    {
      "source": "NB",
      "target": "Account",
      "value": 1,
      "label": null
    },
    {
      "source": "RBG",
      "target": "Account",
      "value": 1,
      "label": null
    }
  ]
};
var width = window.innerWidth;
var height = window.innerHeight;
var center;
if (width > 1200) {
  center = [(width - 1200) / 2, 0]
} else {
  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({
    source: sourceNode,
    target: targetNode,
    value: e.value
  });
});


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
  })
  .style("stroke-width", function(d) {
    return d.value;
  });

link.append("title").text(function(d) {
  return d.value;
});

var drag = d3.behavior.drag()
  .on("drag", function(d) {
    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");


var i = 0;
node.each(function(d) {
  if (d.type == "CIRCLE") {
    d3.select(this).append("circle")
      .attr("r", 50)
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d) {
        return d.y
      })
      .call(drag)
      .style("fill", function(d) {
        return color(i & 3);
      });

    d3.select(this).append("text")
      .text(function(d) {
        return d.name;
      })
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + (d.y + 5) + ")";
      })
      .style("text-anchor", "middle");
  } else {
    d3.select(this).append("rect")
      .attr("height", 40)
      .attr("width", 140)
      .attr("x", -10)
      .attr("y", -(40 / 2))
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + (d.y + 5) + ")";
      })
      .style("fill", "green");
    d3.select(this).append("text")
      .text(function(d) {
        return d.name;
      })
      .style("text-anchor", "start")
      .attr("transform", function(d) {
        return "translate(" + (d.x - 5) + "," + (d.y + 10) + ")";
      });
  }
  i++;
});


node.on("click", function(d) {
  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 src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>

<body style="background-color: #42f4e5">
  <!-- <a href="/visualization/main">main</a> -->
</body>

相关问题
最新问题