Using D3 with Elm

Question

Can I use D3 with Elm using ports? I tried Elm, but I can not find examples of using Elm with D3 without a wrapper API. The problem I ran into is that the wrapper and the forks do not work with 0.18. I also see many statements that suggest creating APIs around javascript APIs is bad practice and you should use ports instead. However, I cannot find examples of this with D3. I found this example , but part of D3 was made in plain javascript, which is not suitable.

I'm probably too aggressive taking on the D3 right now with Elm, but that's really what I want to do with it. If it is not realistic to use D3 with Elm, I probably will not bother with this right now. Is there a fundamental problem with this kind of interaction, or is it just a lack of interest in D3 in the Elm community, or am I just missing something?

For example, extract this code from the bl.ocks example above:

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

Is there a simple Elm translation for this kind of thing?

Answer 1

I know only a little about D3. You will need to put all the data processing in Elm and just pass the data to the js code that controls D3. This will keep your model reasonable.

You also need to keep track of D3 by mutating the DOM, because Elm will try to refresh the parts of the page for which it is responsible. It would be best to cut the page using elm details and other details using Elm.embed. But you could write Elm the whole page and let D3 mutate the DOM if you use Html.keyed to help Elm keep track of what is in the DOM.

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

You can pass functions as such through a port, but you can pass json. so you can use elm to create something like

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

Then you can do in 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

Your problem can be solved with a web component like multi-chart .

Import the component inside index.html and create a node with the necessary attributes:

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