如何将常用方法提取到函数中

Question

我想提取常用的方法链，以防止复制粘贴相同的代码。

如何以Javascript方式完成？

原始

if(this.get('with_coverage')){
  svg.append("text")
      .attr("x", (width / 2))
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline")
      .text("With Coverage");
}
else{
  svg.append("text")
      .attr("x", (width / 2))             
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline")  
      .text("Without Coverage");
}

预期

var apply_style = attr("x", (width / 2))
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline");

if(this.get('with_coverage')){
  svg.append("text")
      .apply_style()
      .text("With Coverage");
}
else{
  svg.append("text")
      .apply_style()
      .text("Without Coverage");
}

Answer 1

svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .style("text-decoration", "underline")
    .text("With"+(this.get('with_coverage')?"":"out")+" Coverage");

Magic.

---

有些人不喜欢那些混合在代码中的三元运营商。在这种情况下，您可以这样做：

function applyStyleBasedOnCondition(selection, actions, condition, t, f){
    actions.call(selection);
    (condition ? t : f).call(selection);
}

applyStyleBasedOnCondition(svg.append("text"), function(){
   this
      .attr({
          x: width / 2,
          y: 0 - (margin.top / 2),
          "text-anchor": "middle"
      }) 
      .style({
          "font-size": "16px",
          "text-decoration": "underline"
      });
}, this.get('with_coverage'), function(){
     this.text("With Coverage");
}, function(){
     this.text("Without Coverage");
});

Answer 2

通过返回相同的对象来实现链接。 要在svg对象中使用apply_style方法，您可以这样做：

svg.apply_style = function(){
   this.attr("x", (width / 2))
       .attr("y", 0 - (margin.top / 2))
       .attr("text-anchor", "middle")  
       .style("font-size", "16px") 
       .style("text-decoration", "underline");

   return this;  //important
}

Answer 3

var svg = d3.select('#svg')

// 1st approach - simple and stable
var circle = function(){
  return svg.append('circle')
    .attr('cx', 100)
    .attr('cy', 100)
    .attr('r', 40)
}

circle()
  .style('fill', 'green')

circle()
  .style('fill', 'red')
  .attr('r', 20)

// 2nd approach - more generic, but not very stable.
// !! Use it carefully !!
d3.selection.prototype.myFillMixin = function(){
  return this.style('fill', '#27F')
    .style('stroke', 'red')
    .style('stroke-width', 4)
    .style('opacity', .7)
}

svg.append('rect')
  .attr('x', 200)
  .attr('y', 200)
  .attr('width', 100)
  .attr('height', 100)
  .myFillMixin()

svg.append('rect')
  .attr('x', 240)
  .attr('y', 240)
  .myFillMixin() //No matter where to place
  .attr('width', 100)
  .attr('height', 100)

Fiddle