vendredi 12 janvier 2018

Re-factoring D3 examples into Ember Components

I've recently started working with D3 and I have found that if I try and take some example code from places like Blockbuilder it is quite difficult to refactor it into a working Ember component.

I am using ember-d3 and understand that I need to import specific modules in the component.js file.

Taking an example like this:

  var vis = d3.select("svg")
        .append("svg:svg")   
        .data([data])                   
            .attr("width", w)           
            .attr("height", h)
        .append("svg:g")                
            .attr("transform", "translate(" + r + "," + r + ")")  

    var arc = d3.svg.arc()             
        .outerRadius(r);

    var pie = d3.layout.pie()        
        .value(function(d) { return d.value; });    

    var arcs = vis.selectAll("g.slice")    
        .data(pie)                         
        .enter()                          
            .append("svg:g")               
                .attr("class", "slice");  

        arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } ) 
                .attr("d", arc);                                  

        arcs.append("svg:text")                              
                .attr("transform", function(d) {                  

                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";       
            })
            .attr("text-anchor", "middle")                         
            .text(function(d, i) { return data[i].label; });
}

The above is a simple pie chart but adding. I understand the function of most of the code but refactoring it into an Ember component produces errors ranging from Unexpected Tokens to reserved words errors

So assuming I have the component being called in the template with and the component template has an element being successfully drawn on the page, what steps do I need to take to draw the chart in Ember?

There are surprisingly few resources on D3 and Ember.




Aucun commentaire:

Enregistrer un commentaire