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