2015-10-26 4 views
1

У меня есть следующие:Как передать переменную внутри функции «.each»?

var columns = ['Fruit', 'Color'] 

var graphData = [ 
    [6,3,3,2,5], 
    [18,7,6,1,0] 
]; 

var data = [ 
    [6,3], 
    ['Apple', 'Red'] 
] 
var maxes = [10, 20]; 

// create table 
var table = d3.select("#table").append("table"); 
var thead = table.append("thead").append("tr"); 
thead.selectAll("th").data(columns).enter().append("th").text(function(d) { 
     return d; 
}); 
var tbody = table.append("tbody"); 
var trows = tbody.selectAll("tr").data(data).enter().append("tr"); 
var tcells = trows.selectAll("td").data(function(d, i) { return d; }) 
    .enter().append("td").text(function(d, i) { return d; }); 
// update (add a column with graphs) 
thead.append("th").text('Graphs'); 
trows.selectAll("td.graph").data(function(d,i) {return [graphData[i]];}) 
    .enter().append("td").attr("class", "graph").each(function(test, j){ 
      var width = 100, height = 20; 
      var x = d3.scale.linear() 
       .range([0, width - 10]) 
       .domain([0,5]); 
      var y = d3.scale.linear() 
       .range([height, 0]) 
       .domain([0,maxes[j]); 
      var line = d3.svg.line() 
        .x(function(d,i) {return x(i)}) 
        .y(function(d) {return y(d)}); 

      d3.select(this).append('svg') 
        .attr('width', width) 
        .attr('height', height) 
       .append('path') 
        .attr('class','line') 
        .datum(test) 
        .attr('d', line); 

}); 

важная часть:

var y = d3.scale.linear() 
      .range([height, 0]) 
      .domain([0,maxes[j]); 

Я пытаюсь динамически установить область оси у для каждой диаграммы. Если я избавлюсь от «maxes [j]» и настрою его вручную, это будет работать, но я бы хотел, чтобы каждая диаграмма выглядела правильно. Как я его теперь jsfiddle не делает:

My fiddle

+0

использование Function.prototype.bind если вы используете новые браузеры, или polyfill для старых браузеров, читайте на MDN об этом. –

+2

'.domain ([0, maxes [j]]);' вы отсутствовали '' 'в этой строке - [обновленный скрипт] (http://jsfiddle.net/Lgq6ct9f/16/) – smerny

+1

@smerny Если это было решение, которое я хотел бы закрыть это как простую типографскую ошибку. –

ответ

0

Вместо прохождения вокруг предварительно определенного Maxes, вы могли бы просто использовать:

.domain(d3.extent(test)); 
0

Проблема заключается в том, что maxes[j] всегда 0. Изменить строку:

trows.selectAll("td.graph").data(function(d,i) {return [graphData[i]];}) 

к:

trows.selectAll("td.graph").data(function(d,i) {return [graphData[i], i];}) 

Примечание недостающий ", i".

Окончание jsFiddle.

Смежные вопросы