如何在D3中创建自定义元素

Question

代码基于bl.ocks上Denise的代码。如何添加到现有的代码文本和图标的节点？我几乎可以通过添加所需的元素来做到这一点，但问题是圆圈出现在（0，0）坐标上。

一张图片值一千字，

并且我的目标是在节点内部以及节点需要放置的位置，中间是文本，还有图标，

这是我当前的代码，只要没有注释掉的部分（这就是我试图做的），就可以完美地工作

class ApplicationController < ActionController::API
  # ..some code here..

  # raise in the development mode
  unless Rails.env.development?
    rescue_from Exception, with: :exception_handler
  end

  def exception_handler(exception)
    case exception
    # You can define your own exception somewhere
    # raise it in the code and catch here
    # when MyCustomException
    #  render json: { message: 'Something goes wrong' }, status: :unprocessable_entity
    when ActionController::UnknownFormat, ActionController::InvalidCrossOriginRequest
      render json: { message: 'Bad request' }, status: :unprocessable_entity
    when ActiveRecord::RecordNotFound, ActionController::UnknownController, ActionController::RoutingError 
      render json: { message: 'Not found' }, status: :not_found
    else
      # perform an error
      # logs goes here
      render json: { message: 'Internal error' }, status: :internal_server_error
    end
  end
end

当我取消注释时，您可能会在图像中看到圆圈出现在（0,0）点。

如果您能帮助我，我将不胜感激！谢谢。

Answer 1

现在，您正在将newNode变成圈子的选择：

newNode = newNode.append("circle")
    //etc...

因此，为了将其保留为组的选择，请将该行更改为：

newNode.append("circle")
    //etc...

然后，取消注释评论的部分。

最后，由于现在node.merge(newNode)将成为组的选择，因此将打勾函数中的cx和cy更改为translate：

node.attr("transform", function(d) {
    return "translate(" + (d.x = Math.max(radius, Math.min(currentScreen.width - radius, d.x))) +
        "," + (d.y = Math.max(radius, Math.min(currentScreen.height - radius, d.y))) + ")";
});