Question

我最近开始使用D3，我发现如果我尝试从像Blockbuilder这样的地方获取一些示例代码，那么很难将它重构为工作的Ember组件。

我正在使用ember-d3，并了解我需要在component.js文件中导入特定模块。

举个这样的例子：

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

以上是一个简单的饼图，但添加。我理解大多数代码的功能，但将其重构为Ember组件会产生从意外标记到保留字错误的错误

因此假设我在模板中使用{{pie-chart}}调用了组件，并且组件模板在页面上成功绘制了一个元素，在Ember中绘制图表需要采取哪些步骤？

D3和Ember的资源非常少。

Answer 1

你是对的很难找到Ember / D3的资源。这里有一些工作的Ember / D3示例，我将它们放在一起，可能会引导您朝着正确的方向前进。有些是纯D3示例的直接实现，有些是我自己的粗略努力。所有都使用基于组件的图表。

我使用ember install ember-browserify和标准npm install d3将d3.js添加到以下Ember应用中。

请务必了解正在实施的d3.js版本。 d3.js 3.X.X到4.X.X有一些重大变化。您可能需要使用npm install d3@3.5.17 3.5.17是最新版本3发布。

ember-d3-sample3

ember-d3-sample2

ember-d3-v3-collision

ember-d3-v4-streamgraph

将D3示例重新分解为Ember组件

1 个答案: