調用函數（d）{} in .attr（）

Question

我嘗試將數字設置爲轉換組的屬性。

但是，要設置數字，我需要訪問數據。

我發現用function(d){}訪問數據是不可能的。

如何訪問.attr()中的數據？

var xCol = 'month' 

var wraps = g.selectAll('.wrap').data(data); 
    wraps.enter().append('g') 
    .attr('class', 'wrap') 
    .attr('transform', 'translate('+function(d){return xScale(d[xCol])}()+', '+ (-margin.top)+')') 

>>>index.js:132 Uncaught TypeError: Cannot read property 'month' of undefined 

我想讓幾組.wrap和各組

畫吧，但我不知道該數據轉發到子元素。

var bars = wraps.selectAll('.bar').data(function(d){return d}); 
    bars.enter().append('rect') 
    .attr('class', 'bar') 
    .attr('x', function(d){return xScale(d.d[xCol])}) 
    ... 

Answer 1

我想你可能只是想法正確，但錯過了一件小事。 attr函數的第二個參數應該是另一個函數。如下所示。

var svg = d3.select('svg'); 

var dataSet = [10, 20, 30, 40]; 

var circle = svg.selectAll('circle') 
    .data(dataSet) 
    .enter() 
    .append('circle') 
    .attr('r', function(d) {return d;}) 
    .attr('cx', function(d,i) {return i * 100 + 50;}) 
    .attr('cy', 50) 
    .attr('fill', 'red') 

所以函數然後返回結果。這撥弄它顯示在行動 你的情況http://jsfiddle.net/bdkxgph5/1/

所以代替你ATTR與

.attr('transform', function(d) { return 'translate('+xScale(d[xCol])+', '+ (-margin.top)+')'}) 

調用