Anruffunktion (d) {} ​​in .attr()

Question

Ich habe versucht, Zahlen als Übersetzungsattribute von Gruppen zu setzen.

Aber, um die Zahlen einzustellen, muss ich auf Daten zugreifen.

Ich fand es unmöglich, auf Daten mit function(d){} zuzugreifen.

Wie auf Daten in .attr() zugreifen?

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 

Und ich möchte mehrere Gruppen .wrap und Zugstangen in jeder Gruppe

Aber machen, ich habe keine Ahnung Datenelemente Kind zu übermitteln.

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

Ich denke, Sie können nur die Idee richtig haben, aber eine kleine Sache fehlt. Das zweite Argument der Attr-Funktion sollte eine andere Funktion sein. Wie unten.

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') 

Also die Funktion gibt dann das Ergebnis zurück. Diese Geige zeigt sie in Aktion http://jsfiddle.net/bdkxgph5/1/

Also in Ihrem Fall ersetzen Sie attr rufen mit

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