代码之家 › 专栏 › 技术社区 › yavg

我无法移动节点,力图在3.js中不适用

d3.js javascript

yavg · 技术社区 · 7 年前

为什么会这样?

var link = g.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke", function(d) {
    console.log(d);
    return colorLink(d.group);
  })
  .attr("marker-end", "url(#arrow)");

var node = g.selectAll("g.node")
  .data(graph.nodes)
  //.filter(function(d){ return d.type=="circle"; })
var NodeCircleEnter= node.enter().append("g")
  .attr("class","node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

  NodeCircleEnter
  .append("circle")
  .attr("r", 20)
  .attr("fill", function(d) {
    return colorNode(d.group);
  })
  .style("stroke", function(d) {
    return colorNode(d.group);
  })

// Append images
var images = NodeCircleEnter.append("svg:image")
    .attr("xlink:href",  function(d) {console.log(d); return d.image;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

这是我的完整代码:

https://plnkr.co/edit/9uH13N3or3G9VTgQlMm9?p=preview

0 回复 | 直到 6 年前

Ouroborus 7 年前

事件处理程序需要应用于元素本身,而不是整个画布。

在此代码中(仅存在于Plunker项目中,但不存在于您的问题中):

var drag_handler = d3.drag()
  .on("start", drag_start)
  .on("drag", drag_drag)
  .on("end", drag_end);

drag_handler(node);

node 这是图纸。实际上,您需要一个元素集合来影响从函数中得到的结果,比如 .enter() . 你的变量 NodeCircleEnter 包含该集合,因此特定行应为:

drag_handler(NodeCircleEnter);

这仍然留下了一个问题,即在标签上拖动本身不起作用。这是因为标签不是设置处理程序的元素的子元素。

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

3 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

8 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

8 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

8 年前

MTT · 最适合散点图的回归

8 年前

Cyley Simon · 以chile/name格式将Csv转换为json

8 年前

Himani · 线图和面积图之间的颜色不同

8 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

8 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

8 年前