在Elm中使用D3

使用D3和Elm一起使用端口是否可管理？我嘗試了榆樹，但我找不到任何使用包含API的Elm的例子。我碰到的問題是wrapper和叉子不能用0.18工作。我還看到很多聲明表明，圍繞JavaScript API構建API是不好的做法，相反，您應該使用端口。但是，我找不到D3的任何例子。我發現this example，但D3部分全部都是用純javascript完成的，但並不適合。在Elm中使用D3

我可能是太過侵略性地拿着D3立刻與榆樹打成一片，但那真的是我想要做的。如果用榆樹不適合使用D3，我現在可能不會爲此而煩惱。這種互動是否存在根本性問題？或者僅僅是對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);

是否有一個簡單的翻譯成榆樹對於這種事情？

來源

2017-02-15 JimmyJames

下面是用端口和一個大JS庫（谷歌地圖）工作的HTTP的例子：//simonh1000.github .io/2016/12/elm-ports-google-maps /它可能會幫助你 –

@SimonH感謝您的協助。我已經看過這樣的一些東西，但是我奮鬥的地方是d3使用了很多方法引用。你需要傳遞函數並調用返回函數的函數（也是對象）。我對Elm如何做到這一點很無能，所以我希望能找到一個可行的（簡單的）例子。 – JimmyJames

你能否提供你必須通過這個端口的代碼示例。擴展你的問題，以顯示你想從Elm D3訪問什麼功能 –

我只知道一點D3。你會希望把所有的數據處理放在Elm中，並將數據傳遞給控制D3的js代碼。這將保持你的模型健全。

您還需要注意D3突變DOM，因爲然後Elm會努力更新它所負責的頁面部分。最好的做法是用Elm.embed榆樹零件和其他零件分割你的頁面。但是，如果您使用Html.keyed來幫助Elm跟蹤DOM中的內容，您可能可以讓Elm編寫整個頁面並讓D3改變DOM。

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

您可以通過端口傳遞函數，但您可以傳遞json。所以你可能會使用榆樹創建類似

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

然後，你可以在JS做

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);

來源

2017-02-16 13:32:49

那麼在示例代碼中與JavaScript的交互類型不可能在Elm中實現嗎？ – JimmyJames

問題是您建議的代碼會改變DOM，並且_could_會混淆Elm的DOM更新。我不確定，可能需要嘗試確定。但使用鍵控將有助於 –

好的，這是有幫助的，但我真正需要的是幫助我如何將功能傳遞給D3以及如何從D3中檢索功能/對象以便將它們傳遞迴D3。我發現的Elm互操作性文檔似乎只是談論簡單的交互。我的偏好（至少在最初）實際上是用D3做所有的演示。它可以處理任何DOM操作，而不僅僅是SVG等。 – JimmyJames

您的問題可以用WebComponent的像multi-chart來解決。

導入內部index.html的組件，並創建你想要的屬性的節點：

Html.node "multi-chart" [ Html.Attributes.attribute "title" "test chart" ] []

來源

2017-02-23 12:59:35 Lisard

我不知道如何回答這個問題。具體來說，我沒有看到這個項目與Elm有關。 – JimmyJames

我想指出的是，在大多數情況下，與javascript和Elm互操作的最佳方式是不使用端口，而是使用webcomponents。我從在生產應用程序中使用Elm的六個月中學到了東西。請檢查rtfeldman的這個演講：https://www.youtube.com/watch?v=ar3TakwE8o0e – Lisard

我想我不知道這對我有什麼幫助。我想用D3編寫整個UI。業務邏輯將在服務器上。我會用Elm剩下什麼？ – JimmyJames

回答

相關問題