Question

我有以下内容：

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]);

我正在尝试为每个图表动态设置y轴的域。如果我摆脱“maxes [j]”并手动设置它可行，但我想让每个图表看起来都正确。正如我现在所说的那样，jsfiddle不呈现：

My fiddle

Answer 1

问题是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];})

请注意缺少＆＃34; , i＆＃34;。

最终jsFiddle。

Answer 2

您可以使用：

，而不是绕过预先确定的最大值

.domain(d3.extent(test));

如何在“.each”函数中传递变量？

2 个答案: