Question

我是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对象。这些都是好主意吗？

在其他方面，我觉得我想要类似的东西 - 有点像我想要映射＆＃39;对象＆＃39;文件，而不是普通的旧数据到文件。这是一个常见的要求，还是我在概念上遗漏了什么？

解决我上述pointOnCircle问题的最佳方式是什么？

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

Answer 1

您可以遵循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 根据其设置属性（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);

希望这会有所帮助。让我知道任何不明确的观点。

Answer 2

我希望这会有所帮助。

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>

D3中可重复使用的功能

2 个答案: