制作＆＃34;小部件＆＃34;对于D3.js中的SVG-group

Question

我正在使用D3来操作SVG，它包含几个＆＃34;小部件＆＃34;有行为，可以通过事件控制。比如我有一个旋转的风扇。应该可以打开和关闭风扇。我已经能够在D3中构建它，但不是以优雅的方式构建，并且所有代码都是全局的。我最终想要的是如下：

创建＆＃34; widget＆＃34;，从jQuery知道：

d3.select('svg').append('g').attr('id', 'myFan').fan();

然后我想像下面这样用smth打开和关闭，也就像jQuery所知：

d3.select('#myFan').fan('start')
d3.select('#myFan').fan('stop')

是否有可能在D3中实现这一点，即创建这样的＆＃34;小部件＆＃34;？

使用D3时，是否存在针对此类问题的不同方法？

我目前使用全局代码的优雅解决方案：

罗伯特要求这样做。 Codepen的代码：link。

的Javascript

var fan = d3.select('body')
  .append('svg')
    .attr('width', 200)
    .attr('height', 200)
  .append('g')
    .attr('class', 'fan')
    .attr('id', 'myFan')
    .attr('transform', 'translate(75,75)')

// Static, background disc
fan.append('circle')
    .attr('cx',0)
    .attr('cy',0)
    .attr('r',60)

// Dynamic, rotating path
var blade = fan.append('path')
    .attr('d', 'M 0 0 L -30 15 L -60 0 Z L 30 -15 L 60 0 Z ')
    .attr('transform', 'translate(50,50)')
    .attr('transform', 'rotate(90)');

// Static, hub
fan.append('circle')
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('r', 10)

var rotation = 0; // degrees
var speed = 10; // degree per call
function rotate() {
  rotation = (rotation + speed) % 360;
  blade.attr('transform', 'rotate('+rotation+')')
}

setInterval(rotate, 100);

function stop() { speed = 0; }
function start() { speed = 10; }

var ctrlPanel = d3.select('body').append('div');

ctrlPanel.append('button').text('Start').on('click', start);

ctrlPanel.append('button').text('Stop').on('click', stop);

CSS

path {
  fill: red;
  strok: blue;
  stroke-width: 3px;
}
.fan circle {
  fill: lightgray;
  stroke: black;
  stroke-width: 3px;
}
.fan path {
  fill: darkgray;
  stroke: black;
  stroke-width: 3px;
}