相关疑难解决方法(0)

几天前,我在用户选择更改数据顺序时创建了关于迷你图排序的问题.答案已经解决了问题,但仍保持红色圆圈的正确位置,突出显示用户放置鼠标的位置.

这是代码:PLUNKER.

我想到了在数据排序发生变化时如何更改代码以重新定位迷你线圆圈.我不明白在哪里以及如何更改代码.下面我尝试根据有关迷你图的代码点来解释我的推理.

(1)这两行代码定义了迷你图的域和范围.在我看来,当数据的排序发生变化时,不应该更改它们.

// domain and range for sparkline lines
var xSpark = d3.scaleLinear().domain([0, numYears-1]).range([0, sparkLength]); 
var ySpark = d3.scaleLinear().domain([minYvalue, maxYvalue]).range([itemSize-2, 2]);

(2)这段代码选择元素#data-svg-i(在哪里i是迷你线),它附加一个圆圈,将其定位cx,cy取决于xSpark和ySpark.如果在点提到的1是真实的(即xSpark和ySpark被"固定"的值),则即使这一段代码不具有要被改变的数据顺序的改变时.

var cells = svg.selectAll('.cell')
    .data(data)
    .enter()
    .append('g')
    .append('rect')
    .on('mouseover', function(d, i) { // on mouseover rect
        // get row, column and value of this rect
        var idr = d3.select(this).attr('data-r'); // row
        var …