首页 \ 问答 \ 这个javascript原型模式有什么好处？(What is the benefit of this javascript prototype pattern?)

这个javascript原型模式有什么好处？(What is the benefit of this javascript prototype pattern?)

 我看到一些代码以这种方式定义原型中的方法：  
function Class() {...}
(function() {
    this.method1 = function() {...};
    this.method2 = function() {...};
}).call(Class.prototype);
 
 这种结构与其他结构相比有什么好处？ 以下是其他一些例子：  
function Class() {...}
Class.prototype = {
    method1: function() {...},
    method2: function() {...}
};
 
 要么  
function Class() {...}
Class.prototype.method1 = function() {...};
Class.prototype.method2: function() {...};
 
 要么  
function Class() {...}
Class.prototype = Object.create({...}, {...});
Class.prototype.constructor = Class;
 
 以下我知道在内存方面效率稍低，因为每个实例都有自己的method1和method2副本：  
function Class() {
    var privateVar = 0;
    this.method1 = function() {...};
    this.method2 = function() {...};
}
 
 当然，这种结构的好处是方法可以访问私有变量。 

I saw some code defines the methods in the prototype this way: 
function Class() {...}
(function() {
    this.method1 = function() {...};
    this.method2 = function() {...};
}).call(Class.prototype);
 
What is the benefit of this construct versus others? Here are some other examples: 
function Class() {...}
Class.prototype = {
    method1: function() {...},
    method2: function() {...}
};
 
or  
function Class() {...}
Class.prototype.method1 = function() {...};
Class.prototype.method2: function() {...};
 
or 
function Class() {...}
Class.prototype = Object.create({...}, {...});
Class.prototype.constructor = Class;
 
the following I know is a bit less efficient in term of memory because each instance has its own copy of method1 and method2: 
function Class() {
    var privateVar = 0;
    this.method1 = function() {...};
    this.method2 = function() {...};
}
 
of course the benefit of this construct is that the methods can access private variables.

原文：https://stackoverflow.com/questions/23556185

更新时间：2023-05-29 08:05

最满意答案

 问题是您正在尝试将文本元素附加到圆圈。  
var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) { return d.degree; })
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

 // node here consists of svg circles.
 node.append("text")
      .text(function(d) { return d.name; })
 
 试试这个  
var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag); // moved this here

node.append("circle")
    .attr("r", function(d) { return d.degree; })
    .style("fill", function(d) { return color(d.group); })
    // .call(force.drag);

 // node here is a `g` element so we can append text elements to it.
 node.append("text")
      .text(function(d) { return d.name; })
 
 我还将call(force.drag)移到.attr("class", "node")行之后，以便将它应用于给定node元素的所有子node 。 

The issue is that you're trying to append a text element to a circle.  
var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) { return d.degree; })
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

 // node here consists of svg circles.
 node.append("text")
      .text(function(d) { return d.name; })
 
Try this instead 
var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag); // moved this here

node.append("circle")
    .attr("r", function(d) { return d.degree; })
    .style("fill", function(d) { return color(d.group); })
    // .call(force.drag);

 // node here is a `g` element so we can append text elements to it.
 node.append("text")
      .text(function(d) { return d.name; })
 
I also moved the call(force.drag) up to after the .attr("class", "node") line in order to have it apply to all children of a given node element.

这个javascript原型模式有什么好处？(What is the benefit of this javascript prototype pattern?)

最满意答案

相关问答

用于学校教学的电脑网络教室，它的网络类型属于（） A.互联网 B.广域网 C.城域网 D.局域网[2023-01-12]

标记D3中的网络节点(Labeling network nodes in D3)[2022-08-05]

在d3 v4中拖动带有标签的节点会强制布局毛刺(Dragging nodes with labels in d3 v4 force layout glitches)[2022-11-07]

在特定的力布局中标记节点的问题D3(Problems to label nodes in a particular force layout D3)[2023-03-24]

冻结力导向网络图并在D3中进行拖动(Freezing force directed network graph and make draggable in D3)[2022-07-30]

从d3选择中获取所有dom节点(Get all dom nodes from d3 selection)[2023-05-29]

在d3画布中动态添加节点(Adding a node dynamically in d3 canvas)[2022-03-20]

标记并向D3 SVG节点添加图标(Labeling and adding an icon to D3 SVG nodes)[2022-09-23]

json表示为d3强制定向网络(json representation for d3 force directed networks)[2023-12-06]

在D3中的位置内定位节点(Positioning nodes within locations in D3)[2022-04-01]

相关文章

最新问答