D3中的可重用函数

Reusable functions in D3

本文关键字：函数 D3      更新时间：2024-04-08

我是d3的新手，也是一个相当普通的javascript程序员。我有一些代码来创建一个圆，还有一个函数来获取圆上一点的x和y坐标：

var innerCircle = svg.append('circle')
  .attr({
    cx: 100,
    cy: 100,
    r: 50,
    'stroke': 'white',
    'fill': 'transparent',
  });
var pointOnCircle = function(circle, radians){
  var cx = parseInt(circle.attr('cx'));
  var cy = parseInt(circle.attr('cy'));
  var r = parseInt(circle.attr('r'));
  var x = cx + Math.sin(radians) * r;
  var y = cy + Math.cos(radians) * r;
  return {x: x, y: y};
}

它有效。但我觉得继续使用这种方法会使我的代码成为一个混乱的全局函数包，而且我应该能够使它面向对象，所以不要调用：

var point = pointOnCircle(circle, Math.PI);

我可以打电话给：

var point = circle.pointAt(Math.PI);

但这将涉及到我以某种方式将pointAt函数附加到d3对象，或者创建我自己的Circle对象，该对象具有pointAt函数，并包装d3对象。这两个都是个好主意吗？

在其他方面，我觉得我想要类似的东西——有点像我想将"对象"映射到文档，而不是将简单的旧数据映射到文档。这是一个常见的需求，还是我在概念上遗漏了一些东西？

处理上述pointOnCircle问题的最佳方法是什么？

大多数d3示例都是小型的、自包含的，并且是用一个脚本编写的。有没有任何例子表明如何构建具有更多可重用功能的东西？

您可以遵循d3.js风格的函数式编程，如下所示

function innerCircle() {
    var current_attr, current_style, circle_elem;
    var _circle = function (svg) {
        circle_elem = svg.append('circle')
            .attr(current_attr)
            .attr(current_style);
        return circle_elem;
    }
    _circle.pointAt = function (randians) {
        if(! circle_elem)       //If the circle is not drawn yet.
            return {x: -1, y: -1};
      var cx = parseInt(circle_elem.attr('cx'));
      var cy = parseInt(circle_elem.attr('cy'));
      var r = parseInt(circle_elem.attr('r'));
      var x = cx + Math.sin(radians) * r;
      var y = cy + Math.cos(radians) * r;
      return {x: x, y: y};
    }
    _circle.attr = function(attr_val){
        if(! arguments.length)
            return current_attr;
        current_attr = attr_val;
        return _circle;
    }
    _circle.style = function(style_val){
        if(arguments.length == 1)
            return current_style;
        current_style = style_val;
        return _circle;
    }
    return _circle;
}

这是函数式编程的一个典型例子。主要对象是_circle，函数是通过调用innerCircle获得的。_circle根据svg的集合属性（current_attr，current_style）在svg上绘制一个圆。要在svg上画一个圆圈，可以用d3.js的方式：

var new_circle = innerCircle();
svg.call( new_circle );

_circle函数有3个定义的方法，attr、style和pointAt。attr和style是getter/setter函数，如果不带参数调用它们，它们将返回当前值（getter），如果带参数调用，它们将设置当前值。

new_circle.style(); //get the current style
//set attributes
new_circle.attr({
    cx: 100,
    cy: 100,
    r: 50,
    'stroke': 'white',
    'fill': 'transparent',
});

您也可以类似地调用pointAt函数。

new_circle.pointAt(Math.PI);

这种编程风格的最后一个警告是在所有setter函数末尾的return _circle;语句，它允许链接。因此，您的示例可以通过以下方式复制：

var new_circle = innerCircle()
  .attr({
    cx: 100,
    cy: 100,
    r: 50,    
  })
  .style({
    'stroke': 'white',
    'fill': 'transparent',
  });
svg.call(new_circle);

希望这能有所帮助。有什么不清楚的地方请告诉我。

我希望这能有所帮助。

var myProgram = {};
myProgram.circleModule = (function() {
  var innerCircle = d3.select("#svg").append('circle')
    .attr({
      cx: 100,
      cy: 100,
      r: 50,
      'stroke': 'black',
      'fill': 'red',
    });
  var pointOnCircle = function(circle, radians) {
    var cx = parseInt(circle.attr('cx'));
    var cy = parseInt(circle.attr('cy'));
    var r = parseInt(circle.attr('r'));
    var x = cx + Math.sin(radians) * r;
    var y = cy + Math.cos(radians) * r;
    return {
      x: x,
      y: y
    };
  }
  return {
    circle: innerCircle,
    pointOnCircle: pointOnCircle
  }
})();
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
  <svg id="svg" width="200" height="200">
  </svg>

相关文章：