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

D3js, uncaught reference error when selecting rect in selectAll('rect')

本文关键字:rect 错误 引用 selectAll D3js 选择      更新时间:2023-09-26

我正在使用D3制作图表。我希望用户能够通过调整单柱形水平柱形图上的堆叠条形的大小来输入他们的选择。

形是堆叠的,每个条形都有 .call(drag) 事件侦听器。

此拖动事件返回错误。

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 

它说违规线是var currentNextWidth ....

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

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

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

我没有意识到i是一根绳子,因为它本身工作正常。 不过i + 1玩起来了。

我认为发生的事情是i(字符串)可以像array['1']一样工作,但i + 1可以像array['11']一样工作。