Używanie D3 z Elmem

Question

Czy można używać D3 z Elm przy użyciu portów? Próbuję Elm, ale nie mogę znaleźć żadnych przykładów użycia Elm z D3 bez otoki API. Problemem, który napotkam, jest to, że wrapper i widły nie działają z wersją 0.18. Widzę też wiele stwierdzeń, które sugerują, że budowanie API wokół API JavaScript jest złą praktyką i że zamiast tego powinieneś używać portów. Nie mogę znaleźć żadnych przykładów tego z D3. Znalazłem this example, ale część D3 została zrobiona w prostym javascript, który nie pasuje.

Prawdopodobnie jestem zbyt agresywny, biorąc na siebie D3 tuż przy kiju z Wiązem, ale to naprawdę chcę z nim zrobić. Jeśli nie jest możliwe używanie D3 z Elmem, prawdopodobnie nie będę się tym przejmował. Czy jest jakiś podstawowy problem z tego rodzaju interakcją, czy jest to po prostu brak zainteresowania D3 w społeczności Elma, czy też po prostu coś mi brakuje?

Na przykład, weźmy ten kod zgrane z przykładu bl.ocks powyżej:

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

Czy istnieje tłumaczenie proste w Elm dla tego typu rzeczy?

Answer 1

Wiem tylko trochę o D3. Będziesz chciał umieścić wszystkie dane w Elm i po prostu przekazać dane do kodu js, który kontroluje D3. To sprawi, że twój model będzie zdrowy.

Należy również uważać na mutację D3 w DOM, ponieważ wtedy Wiąz będzie walczył o aktualizację części strony, za którą jest odpowiedzialny. Najlepiej byłoby wyrzeźbić twoją stronę z częściami wiązy i innymi częściami za pomocą Elm.embed. Ale możesz mieć Elm do napisania całej strony i pozwolić D3 zmutować DOM, jeśli użyjesz Html.keyed, aby pomóc Elmowi śledzić, co jest w DOM.

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

Nie można przekazać funkcji jako takich przez port, ale można przekazać json. więc można użyć wiąz, aby stworzyć coś podobnego

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

Następnie można w js zrobić

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

Answer 2

Twój problem może być rozwiązany za pomocą webcomponent jak multi-chart.

importu składnik wewnątrz index.html i utworzyć węzeł z atrybutami, które mają:

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