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

在.attr（）

1 个答案: