將Ember數據與D3.js節點一起使用（強制布局）

Question

我想用Ember.js模型鏈接節點的x和y屬性。

    var nodes = this.get('store').findAll('node').then(function (nodes) {
            var node = svg.selectAll(".node")
                    .data(nodes)
                    .enter().append("circle")
                    .attr("class", "node")
                    .attr("cx", function (d) {
                        return d.x;
                    })
                    .attr("cy", function (d) {
                        return d.y;
                    })
                    .attr("r", 7)
                    .style("fill", function (d) {
                        return fill(1);
                    })
                    .style("stroke", function (d, i) {
                        return d3.rgb(fill(i)).darker(2);
                    });
    });

但是我遇到了Uncaught TypeError: Cannot read property 'x' of undefined在控制台中Uncaught TypeError: Cannot read property 'x' of undefined錯誤的Uncaught TypeError: Cannot read property 'x' of undefined 。 我在模型中定義了x和y值。 也許我做錯了。

基本上，我要做的就是使用d3圖中模型的x和y值。

Answer 1

DS.Store.findAll返回一個承諾，您將必須等待其解決才能使用它。

this.get('store')
  .findAll('node')
  .then(nodes => {
    let node = svg.selectAll(".node") // rest of your code
  })

您還需要使用Ember.get來訪問模型上定義的屬性

Answer 2

假設d3圖表所需格式為[{'x':'xvalue','y':'yvalue'}] 。 那么您需要將節點結果轉換為新的對象數組。

var d3ExpectedFormat = nodes.map(function(node){
 return {'x':node.get('x'),'y':node.get('y')};
});

代替.data(nodes)嘗試.data(d3ExpectedFormat)