d3.js - 将 D3 与 Elm 结合使用

Question

使用端口将 D3 与 Elm 一起使用是否可以管理？我正在尝试 Elm，但找不到任何在没有包装 API 的情况下将 Elm 与 D3 结合使用的示例。我遇到的问题是 wrapper并且前叉不适用于 0.18。我还看到很多声明，建议围绕 javascript API 构建 API 是不好的做法，而您应该使用端口。但是，我在 D3 中找不到任何此类示例。我找到了 this example但是 D3 部分都是用普通的 javascript 完成的，这并不合适。

我可能对与 Elm 立即使用 D3 过于激进，但这确实是我想要用它做的。如果将 D3 与 Elm 一起使用真的不可行，我现在可能不会打扰它。这种交互是否存在根本问题，或者仅仅是 Elm 社区对 D3 缺乏兴趣，还是我只是遗漏了什么？

例如，从上面的 bl.ocks 示例中提取以下代码:

var t = d3.transition().duration(750);
var g = d3.select("svg g")
// JOIN new data with old elements.
var text = g.selectAll("text")
  .data(data, function(d) { return d; });

// ENTER new elements present in new data.
text.enter().append("text")
  .attr("class", "enter")
  .attr("dy", ".35em")
  .attr("y", -60)
  .attr("x", function(d, i) { return i * 24; })
  .style("fill-opacity", 1e-6)
  .text(function(d) { return d; })
  .transition(t)
  .attr("y", 0)
  .style("fill-opacity", 1);

这种事情有没有直接翻译成榆树？

Answer 1

我对 D3 只知道一点点。您将希望将所有数据处理放在 Elm 中，并将数据传递给控制 D3 的 js 代码。这将使您的模型保持理智。

您还需要注意 D3 改变 DOM，因为这样 Elm 将难以更新它负责的页面部分。最好的方法是使用 Elm.embed 将您的页面与 elm 部分和其他部分分开。但是，如果您使用 Html.keyed，您也许可以让 Elm 编写整个页面并让 D3 改变 DOM。帮助 Elm 跟踪 DOM 中的内容。

Html.keyed.div "d3node" 
  [ ]
  [ ... ensure that d3 only touches DOM elements inside this node ... ]

您不能通过端口传递这样的函数，但可以传递 json。所以你可以使用 elm 来创建类似的东西

{ function_type: "f1",
  param1: ... ,
  param2: ...
}

然后你可以在 JavaScript 中做一个

switch (data.function_type) of 
  case "f1: 
    function1 (data.param1, data.param2);
...


function1(p1, p2) {
  // some sort of D3 manipulation
  var text = g.selectAll(p1)
    .data(data, p2);