d3.js中的错误:t.map不是函数

时间:2016-06-25 12:44:31

标签: javascript d3.js

希望有人可以帮助我,因为我无法找到有关此错误的任何参考。

我正在处理这段代码:

<script>
var outerWidth = 500;
var outerHeight = 250;
var margin = {left: 90, top:30, right:30, bottom:30};
var barPadding = 0.2;

var xColumn = "Samples";
var yColumn = "Conc";

var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);

var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," +margin.top +")");
var xAxisG = g.append("g")
        .attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g");

var xScale = d3.scale.ordinal().rangeBands([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");


function render(data){

    xScale.domain(data.map(function(d){return d[xColumn];}));
    yScale.domain(0, d3.max(data, function(d){return d[yColumn];}));

    xAxisG.call(xAxis);
    yAxisG.call(yAxis);


    var bars = g.selectAll("rect").data(data);

    bars.enter().append("rect")
        .attr("width", xScale.rangeBand());

    bars.attr("x", function(d){return xScale(d[xColumn]);})
        .attr("y", function(d){return yScale(d[yColumn]);})
        .attr("height", function(d){return innerHeight - yScale(d[yColumn]);});

    bars.exit().remove();
}

function type(d){
    d.conc = +d.conc;
    return d;
}

d3.csv("conc.csv", type, render);
</script>

但我必须在Web控制台中输入以下错误消息:

&#34; TypeError:t.map不是函数

1 个答案:

答案 0 :(得分:2)

错误在这一行:

    yScale.domain(0, d3.max(data, function(d){return d[yColumn];}));

应该是

    yScale.domain([0, d3.max(data, function(d){return d[yColumn];})]);

请注意插入方括号[]

domain()函数接受一个参数,一个包含两个或更多条目的数组。你用两个数字来称呼它。