与d3可重复使用模式的交互性

在D3中:我正在尝试使用可重用的图表模式来实现图表,这允许我添加在实际图表之外处理的事件.例如,我有一个简单的条形图,我可以点击每个单独的条形图.现在,我希望能够在创建图表实例的位置处理它,而不仅仅是处理图表组件中的click事件.例如,我想编辑与单击的条形元素对应的数据,或者我想根据我单击的条的位置更新某个其他元素的位置.为了使图表组件尽可能模块化和独立,我不希望在其中完成某些任务.

我提出了一个非常直接的解决方案,但我觉得必须有一个更好的解决方案.这样我就必须考虑外界可能感兴趣的每一个可能的事件.JSFiddle

function clickHandler(d, i) {
  // do something with the element/event/data
}

var svg = d3.select('#container')
  .append('svg');

var myChart = chart()
    .onClick(clickHandler);

svg.append('g')
  .datum(data)
  .call(chart);

function chart() {
  var OnClick= function() {};

  function _chart(selection) {
    selection.each(function(d, i) {

      selection.selectAll('rect')
        .data(d)
        .enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d, i) {return i * 11;})
        .attr('width', function(d, i) {return d;})
        .attr('height', 10);
        .on('click', _onClick);

    });
  }

  function _onClick(d, i) {
    d3.select(this)
      .attr('fill', 'red');

    onClick(d, i);
  }

  _chart.OnClick= function(_) {
    if(!arguments.length) return onClick;
    OnClick= _;
    return _chart;
  }

  return _chart;
}

是否有任何标准的方法/最佳实践来处理这种情况？或者这不是一个普通的情况？

任何帮助赞赏!

您正在寻找的是在核心应用程序代码和可重用的代码之间创建分离.这是一个好主意,因为它可以使应用程序的代码保持较小,从而使您可以更轻松地更改它并将其向前移动.在可重复使用的图表中,您希望发送非常通用的事件,例如clicked,在您的应用程序中,您需要将事件特定于您的域,例如addSugar.

您需要两种成分:d3.dispatch和d3.rebind.前者可以帮助您创建清晰的内部API,而后者可以帮助您将调度的事件暴露给外部世界.

到这里找一个这样的例子.你想要寻找的是三件事:

在可重复使用的图表中,您可以创建一个包含要发布到外部世界的事件的调度程序: var myDispatch = d3.dispatch('myclick', 'mydrag')

然后在您的可重用图表的事件处理程序中,您发布这些事件,如下所示: myDispatch.myclick(argumentsyouwanttopass)

最后一步,您可以向外界提供这些活动: return d3.rebind(_chart, myDispatch, "on");

然后你可以在外面绑定这些事件: myChart.on('myclick', function(){})

所以你重写的例子看起来像这样:

function chart() {
  var dispatch = d3.dispatch('click');

  function _chart(selection) {
    selection.each(function(d, i) {

      selection.selectAll('rect')
        .data(d)
        .enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d, i) {return i * 11;})
        .attr('width', function(d, i) {return d;})
        .attr('height', 10);
        .on('click', dispatch.click);

    });
  }

  return d3.rebind(_chart, dispatch, 'on');
}