使用D3和Elm

Question

使用D3和Elm使用端口是否可以管理？我正在尝试使用Elm但我找不到任何使用Elm和D3而没有包装API的例子.我遇到的问题是包装器和分叉不能用于0.18.我也看到很多声明建议围绕javascript API构建API是不好的做法,而你应该使用端口.但是,我找不到D3的任何例子.我发现了这个例子,但是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 跟踪 DOM 中的内容，您也许可以让 Elm 编写整个页面并让 D3 改变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);