javascript - 是否可以在 D3 中使用 Knockout Observables

Question

我有一个正在构建的单页应用程序，它使用 D3 和 Knockout 的组合。目前他们正在做不同的工作并处理自己的数据绑定(bind)，但我们必须处理一些交叉。

这让我开始思考，如果这个交叉可以自动处理并且 Knockout 和 D3 能很好地一起玩，那就太好了。下面是一些关于我想做什么的简短示例:

绑定(bind)单个值

在这种情况下，我有一个文本项，我想直接将该值绑定(bind)到我的 observable

d3.select("text").text(myObservable);

绑定(bind)多个值

在这种情况下，我有很多文本项并想绑定(bind)到驻留在数据元素上的可观察对象:

d3.select("text").text(function(d) { return d.myObservable(); });

将单个值与函数(和转换)绑定(bind)

这是两种情况的交叉(但我认为类似于绑定(bind)到多个值)，因为我现在只有一个项目，但我需要能够执行一个函数来正确获取我的值。在这里，如果 observable 发生变化，这将触发动画来改变笔触样式。

d3.select("path")
  .style("stroke", "white")
  .transition()
  .duration(1000)
  .style("stroke", function(d) { 
    var value = d.myObservable();
    if(value < 0) return "red";
    if(value === 0) return "orange";
    return "green";
});

---

就解决方案而言，我一直在考虑重写 d3.selection.prototype.text 函数(可能还有一大堆其他函数):

var setText = d3.selection.prototype.setText;
d3.selection.prototype.setText = function(value, index, groupIndex) {

    var selection = this;
    if(value && ko.isObservable(value)) {
       value.subscribe(function() {
          setText.call(selection, value(), index, groupIndex);
       });
       setText.call(selection, value(), index, groupIndex);
       return;
    }

    if(typeof value === function) {
        var result = value();

        // Not sure how to achieve this bit
        if(value used an observable) {
           allObservablesUsedInFunction.subscribe(function() {
              result = value();
              setText.call(selection, value(), index, groupIndex);
           });
        }

        setText.call(selection, result, index, groupIndex);
        return;
    }

    setText.call(selection, value, index, groupIndex);
};

不过，我不确定如何监控函数中使用的可观察对象，或者之后如何获取它们以进行订阅。我的直觉也是，我将努力在我真正喜欢的那个笔画上发射 d3.transition()。所以我想知道是否有任何其他方法可以实现我想要的效果？

我曾简要考虑过对任何更改进行订阅 - 这会触发典型的 D3 更新操作 - 但我的一些动画仅在自上次更新以来值发生更改时才需要触发，而且我我不确定我如何能够确定这一点。例如 - 如果当前可观察值与前一个值相同(红色->白色->红色看起来很傻)，我不希望触发笔划过渡。

Answer 1

需要注意的是，我对 d3 的理解与刚出生的小猫差不多，我现在只给你一半的答案，希望以后有时间能更充实。

由于 d3 是一个面向 DOM 的包，所以将它与 Knockout 一起使用的方法是将它降级为 custom binding handlers .这就是 DOM 操作的去向。这将有效地为您提供对相关可观察量的订阅，并且您不必混合 d3 的原型(prototype)。

对于您的颜色更改示例，我认为如果您进行了计算以返回颜色值，并订阅了该计算结果，那么如果颜色实际上没有发生变化，您的订阅就不会触发。

更新:我已经为您编写了一个有点通用的“d3”绑定(bind)处理程序。它以 script 和该脚本的 options 作为参数。该脚本应该采用一个 d3 对象(绑定(bind)处理程序将从它绑定(bind)到的元素构造该对象)和一个 options 对象。绑定(bind)处理程序解开 options 中的所有可观察对象，以便脚本看到普通值。

对于此处的示例，我已将其绑定(bind)到路径元素并提供了您问题中的颜色更改脚本。因为我使用计算来确定颜色，所以您可以看到当颜色实际上没有改变时没有过渡。

ko.bindingHandlers.d3 = {
  update: function(element, valueAccessor, allBindingsAccessor, data, context) {
    var d3element = d3.select(element),
      params = valueAccessor();
    for (opt in params.options) {
      params.options[opt] = ko.utils.unwrapObservable(params.options[opt]);
    }
    params.script(d3element, params.options);
  }

};

vm = (function() {
  var v = ko.observable(3),
    color = ko.computed(function() {
      if (v() < 0) return 'red';
      if (v() === 0) return 'orange';
      return 'green';
    });
  return {
    v: v,
    color: color,
    d3script: function(d3element, options) {
      d3element.style("stroke", "black")
        .transition()
        .duration(1000)
        .style("stroke", options.color);
    },
    decrement: function() {
      v(v() - 1);
    },
    increment: function() {
      v(v() + 1);
    }

  };
}());

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<button data-bind="click:decrement">-</button>
<span data-bind="text:v"></span>

<button data-bind="click:increment">+</button>
<svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" />
  <path data-bind="d3:{script: d3script, options: {color:color}}" d="M 100 100 L 300 100 L 200 300 z" fill="#fdd" stroke="blue" stroke-width="7" />
</svg>