Sử dụng D3 với Elm

Question

Có thể quản lý bằng D3 bằng Elm bằng cổng không? Tôi đang thử Elm nhưng tôi không thể tìm thấy bất kỳ ví dụ về việc sử dụng Elm với D3 mà không có một API wrapper. Vấn đề tôi gặp phải là wrapper và các nhánh không hoạt động với 0,18. Tôi cũng thấy rất nhiều câu lệnh đề xuất xây dựng một API xung quanh API javascript là thực hành không tốt và thay vào đó bạn nên sử dụng cổng. Tôi không thể tìm thấy bất kỳ ví dụ về điều này với D3, tuy nhiên. Tôi tìm thấy this example nhưng phần D3 đã được thực hiện tất cả trong javascript đơn giản mà không thực sự phù hợp.

Tôi có thể quá hung hăng với việc sử dụng D3 ngay lập tức với Elm nhưng đó thực sự là những gì tôi muốn làm với nó. Nếu nó không thực sự khả thi để sử dụng D3 với Elm tôi có lẽ sẽ không bận tâm với nó cho bây giờ. Có một vấn đề cơ bản với loại tương tác này hay đơn giản là thiếu sự quan tâm đến D3 trong cộng đồng Elm hoặc tôi chỉ thiếu một cái gì đó?

Ví dụ, lấy mã này tách từ ví dụ bl.ocks trên:

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

Có một bản dịch đơn giản vào Elm cho loại điều?

Answer 1

Tôi chỉ biết một chút về D3. Bạn sẽ muốn đặt tất cả các xử lý dữ liệu trong Elm và chỉ chuyển dữ liệu ra mã js điều khiển D3. Điều đó sẽ giữ cho mô hình của bạn lành mạnh.

Bạn cũng cần phải chú ý đến việc D3 thay đổi DOM vì sau đó Elm sẽ đấu tranh để cập nhật các phần của trang mà nó chịu trách nhiệm. Tốt nhất là để khắc lên trang của bạn với các bộ phận elm và các bộ phận khác bằng cách sử dụng Elm.embed. Nhưng bạn có thể có Elm viết toàn bộ trang và để D3 thay đổi DOM nếu bạn sử dụng Html.keyed để giúp Elm theo dõi những gì trong DOM.

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

Bạn có thể bỏ qua các chức năng truyền như vậy thông qua cổng nhưng bạn có thể chuyển json. vì vậy bạn có thể sử dụng elm để tạo ra một cái gì đó giống như

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

Sau đó, bạn có thể trong js làm một

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

Vấn đề của bạn có thể được giải quyết bằng cách sử dụng webcomponent như multi-chart.

nhập các thành phần bên trong index.html và tạo ra một nút với các thuộc tính bạn muốn:

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