D3js,在selectAll中选择rect时未被引用的引用错误(' rect')

时间:2016-04-20 00:47:06

标签: javascript d3.js

我用D3制作图表。我希望用户能够通过在单列水平柱形图上调整堆积条形来输入其选择。

条形堆叠,每个都有.call(拖动)事件监听器。

此拖动事件会返回错误。

[~, inds] = ismember(A(:,2), B(:,1));   
C = [A, B(inds,2)];

%//   1     1     9
%//   2     2    10
%//   3     1     9
%//   5     2    10

控制台说:

var drag = d3.behavior.drag()
    .on('drag', function() {

        var i = state.interactingWith //i represents current element
        var rects = d3.select('.svg').selectAll('.bar') //Get all stacked bars
        var handles = d3.select('.svg').selectAll('.handle') //Get all event handlers, on the edges of bars
        var currentX = d3.select(rects[0][i]).attr('x')

        d3.select(rects[0][i])
            .attr('width', d3.event.x - currentX)
        d3.select(handles[0][i])
            .attr('cx', d3.event.x)

        if (i < rects[0].length-1){

            var j = i+1 //I want to select the next element, but not if this element is the last
            var currentNextWidth = d3.select(rects[0][j]).attr('width') //This returns the error
            var newNextWidth = currentRightWidth + (+d3.event.x - currentX) 

            d3.select(rects[0][j])
                .attr('x', d3.event.x)                  
            d3.select(rects[0][j])
                .attr('width', newRightWidth)
            questions[i].displayWidth = newRightWidth   

        }
    })

它表示违规行为Uncaught TypeError: Cannot read property 'getAttribute' of null .... d3.min.js:3

如果我用所需的索引替换j,它会按预期工作。 有没有人对这里发生的事情有任何想法?

2 个答案:

答案 0 :(得分:0)

您还没有提到如何获取变量state和state.interactingWith。尝试将调试点放在违规行并在控制台中记录j,rect [0] [j]以检查这些是否在当前范围内可用。

答案 1 :(得分:0)

好的,所以state.interactWith是一个字符串。

我没有意识到i是一个字符串,因为它本身可以正常工作。 i + 1虽然播放了。

我认为发生的事情是i(字符串)作为array['1'],但i + 1作为array['11']