Question

在下面的代码中，我试图读取包含名称和值对的tsv文件，以使用d3.js绘制条形图。

在下面的代码之前，我已经设置了y = d3.scale.linear.range（）。

为什么我在设置时，rect.attr('y',height - barHeight); y设置为NaN，而在var rect = bar.append('rect') .attr('width', barWidth-1) .attr('height', barHeight);，正确设置了矩形高度。

我在此功能之前设置了高度和宽度值。它们并非未定义。

问题在于计算height - barHeight，如果我只是将其设为.attr('y',barHeight);，则设置矩形的y属性。

var svg = d3.select('svg');


var width = 960;
var height = 500;
svg.attr('height', height)
        .attr('width', width);

var y = d3.scale.linear()
            .range([0,500]);

d3.tsv("./src/src.tsv", typeCast,

function (error, array)
    {
        y.domain([0, d3.max(array, function (d){

            return d.value;

        })]);

        var barWidth = width / array.length;

        var barHeight = function (d)
        {
            console.log(y(d.value));
            return y(d.value);
        }


        var bar = svg.selectAll('g')
            .data(array)
            .enter()
            .append('g')
            .attr('transform', function (d, i){

                return "translate("+i * barWidth+")";

            });


        var rect = bar.append('rect')
            .attr('width', barWidth-1)
            .attr('height', barHeight);

        rect.attr('y', height - barHeight);


    }
    );

请帮我设置矩形的y属性。

Answer 1

这是因为你的barHeight是一个函数。

var barHeight = function (d)

当像.attr('height', barHeight)一样使用它时，它会给出正确的值，因为.attr()接受一个函数作为第二个参数，它将被执行并返回值。

第二种用法应该是

rect.attr('y', function(d) { return height - barHeight(d); });

Answer 2

未定义变量高度，因此height - barHeight为undefined - Number，即NaN。正确设置变量height

变量在一个地方设置为Nan，但在另一个地方正确设置

2 个答案: