Question

在D3中：我正在尝试使用reusable charts pattern来实现图表，这允许我添加在实际图表之外处理的事件。例如，我有一个简单的条形图，我可以点击每个单独的条形图。现在，我希望能够在创建图表实例的位置处理它，而不仅仅是处理图表组件中的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;
}

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

任何帮助表示赞赏！

Answer 1

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

您需要两种成分：d3.dispatch和d3.rebind。前者可以帮助您创建一个清晰的内部API，而后者可以帮助您将发送的事件暴露给外部世界。

到这里找一个example。你想要寻找的是三件事：

在可重复使用的图表中，您可以创建一个包含要发布到外部世界的事件的调度程序：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');
}

附加说明：要注册多个事件处理程序，您需要命名它们（就像您必须对常规d3事件进行命名），例如： chart.on('click.foo', handlerFoo)，chart.on('click.bar', handlerBar)等。

Answer 2

使其更可重用并适用于任何可能的事件的一个想法是定义handler数组。这类似于d3本身。这是updated fiddle

function chart() {
  var event_handlers = {}; //key value pairs

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

      var rects = 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);

        for(var event in event_handlers){
          rects.on(event, event_handlers[event])
        }

    });
  }

  _chart.on = function(event, fun) {
    if(arguments.length==1) return event_handlers[event];
    event_handlers[event] = fun;
    return _chart;
  }

  return _chart;
}

您可以像使用HTML元素一样使用chart。

chart.on("click", clickHandler);

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

2 个答案: