Использование D3 с Elm

Question

Можно ли использовать D3 с помощью Elm с помощью портов? Я пробовал Elm, но я не могу найти примеры использования Elm с D3 без API-интерфейса обертки. Проблема, с которой я столкнулся, заключается в том, что wrapper и вилки не работают с 0,18. Я также вижу много заявлений, которые предполагают, что создание API вокруг API-интерфейсов javascript является плохой практикой, и вместо этого вы должны использовать порты. Однако я не могу найти примеры этого с D3. Я нашел this example, но часть D3 была сделана на простом javascript, который не подходит.

Я, вероятно, слишком агрессивен, беря на себя D3 прямо на лету с Elm, но это действительно то, что я хочу с ним делать. Если это не реально использовать D3 с Elm, я, вероятно, сейчас не буду с этим обдумывать. Существует ли фундаментальная проблема с таким взаимодействием или это просто отсутствие интереса к D3 в сообществе Elm, или я просто что-то пропустил?

Например, возьмите этот код вырванные из примера 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 и просто передать данные в код js, который управляет D3. Это сохранит вашу модель.

Вам также необходимо следить за D3, изменяя DOM, потому что тогда Elm будет пытаться обновить части страницы, за которую он несет ответственность. Лучше всего было бы вырезать страницу с помощью деталей вяза и других деталей с помощью Elm.embed. Но вы могли бы написать Elm всю страницу и позволить D3 мутировать DOM, если вы используете Html.keyed, чтобы помочь Elm отслеживать, что есть в 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); 

Answer 2

Ваша проблема может быть решена с помощью webcomponent как multi-chart.

Импорт компонент внутри index.html и создать узел с атрибутами, которые вы хотите:

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