将 Knockout 与 D3 混合使用 - 更新视图答案

【问题标题】：Mixing Knockout with D3 - updating the view将 Knockout 与 D3 混合使用 - 更新视图
【发布时间】：2016-01-16 08:23:43
【问题描述】：

我是一个带 Knockout 和 D3（数据驱动文档）的菜鸟，我想做的是创建一个 JS 对象数组，让 D3 显示。现在我只是在 HTML span 标签中显示一些单词。我要做的是使显示的名称成为可观察的 KO，如果我更改更远的行（date[0].name 行），则视图会获得这些更改。出于某种原因，最后一行似乎没有任何效果。我推测我在生成 HTML 时遗漏了一些东西，而 KO 不知道如何找到要更改的正确位置。我在 d3.select 链的末尾添加了一个“attr(x, y)”调用以尝试添加数据绑定属性，但我认为 KO 要求这些属性是唯一的（但我不确定）。任何帮助表示赞赏。

var data = [
        { "id": "1", "name": ko.observable("alpha"), ...
        { "id": "2", "name": ko.observable("bravo"), ...
        { "id": "3", "name": ko.observable("delta"), ...
];

ko.applyBindings(data);

d3.select("body").selectAll("span")
.data(data)
.enter()
.append("span")
.text(
    function (d) {
        return d.name();
    }
);  

data[0].name('october');

【问题讨论】：

您必须让 Knockout D3 感知此功能。即使在纯 D3 中这也行不通，因为您只是在更新数据，而不是元素。
我认为您可能误解了淘汰赛试图解决的问题。淘汰赛的全部目的（不需要其他库）是保持 HTML 更新数据。
这正是我想要做的。 D3 提供了我想通过 Knockout 保持最新的可视化。然而，拉斯评论指出这是不可能的。
你的数据中的那些可观察的将会对你有所帮助。我可以从这里为你复制粘贴，但这里是链接：voyce.com/index.php/2013/06/23/dynamic-d3-with-knockout-js

标签： data-binding knockout.js d3.js

【解决方案1】：

如果您希望 Knockout 与 d3 一起使用，您需要将 knockout 绑定应用于您创建的每个单独元素：

var data = [
    { "id": "1", "name": ko.observable("alpha") },
    { "id": "2", "name": ko.observable("bravo") },
    { "id": "3", "name": ko.observable("delta") }
];

d3.select("body").selectAll("span")
    .data(data)
    .enter()
    .append("span")
    .attr("data-bind", "text: name") // Applies the data binding attribute
    .each(function (d) {
        ko.applyBindings(d, this); // Sets up Knockout to work with the node
    });

data[0].name('october');

您只需应用这些绑定一次 - 当您更改节点时，数据绑定仍然适用。事实上，如果您将绑定重新应用到一个已经存在的节点，您必须首先调用 ko.cleanNode() 以摆脱第一个绑定。

如果您想在任何绑定上下文中从视图模型中获取此数据，请使用 ko.dataFor() 之类的内容来获取父元素上的绑定：

var data = ko.dataFor(d3.select("#parent-to-attach-to").node());

或显式订阅绑定：

viewModel.observableIWantToTrack.subscribe(function(newValue) {
    // your d3 update code here, using newValue
}

或创建一个调用它的binding handler：

ko.bindingHandler.whateverYouWantToCallYourHandler = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
       // any initialization logic you need
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
       // where you perform your actual updates
    }
}

使用最适合您情况的任何解决方案。

还有一点需要注意：绑定不会重新评估，这就是您必须调用ko.applyBindings() 的原因。这对于普通绑定可能没问题，例如if 甚至with，尽管您会想要注意它们。它们不适合foreach 绑定 - 如果您在插入数据绑定的 d3 元素后尝试评估 foreach 绑定，则 Knockout 将混合您放置的元素并导致很多问题。最好让 d3 的本机数据连接行为做淘汰赛的foreach 正常做的事情。

【讨论】：