Question

我正在创建一个简单的D3折线图，并且在使用d3.bisector()函数创建工具提示时遇到了麻烦。我正在寻找它去每个值的Y和X轴。 bisector函数可以很好地为我提供与鼠标坐标相对应的xData值，但是对于yData，我一直得到一些非常奇怪的结果。我怀疑问题出在yData数组的降序性质。有没有一种方法可以调整bisector()函数来处理降序数组？我正在寻找一种适用于任何数据集的解决方案。

//define the domain and range for the chart
var xScale =  d3.scaleLinear().domain([0,10]).range([0, width]);
var yScale =  d3.scaleLinear().domain([0,10]).range([height,0]);

//data for the line
var xData = [0,1,2,3,4,5,6,7,8,9,10];
var yData = [10,9,8,7,6,5,4,3,2,1,0];

//set up the  bisector function
var bisectData= d3.bisector(function(d){return d}).left;

 // get the x and y position of the cursor and put it into the Xscale/yScale function to get the correct X and Y values from the corresponding coordinates
var x0 = xScale.invert(d3.mouse(this)[0])
var y0 = yScale.invert(d3.mouse(this)[1])

//round the values to the nearest integer to match the original data
var x0 = Math.round(x0);
var y0 = Math.round(y0);

//get the correct index value of the relevant data array
var xIndex= bisectData(xData,x0,1);
//get the actual value from the original array using the correct index

//this work fine 
var x1 = xData[xIndex];

//this does not
var yIndex= bisectData(yData,y0,1);
var y1 = yData[yIndex];

Answer 1

您已经介绍了d3.bisector()上的文档（重点是我）：

如果要以不同于自然顺序的值对值进行排序，请使用比较器而不是访问器，例如降序而不是升序。

该方法的签名使您可以传递比较器函数，该函数以将搜索值作为第二个参数传递的方式进行调用。因此，您可以按降序排列数组的等分线，如下所示：

d3.bisector((d, x) => x - d).left
//              ^--- Search value

看看以下工作演示：

const yData = [10,9,8,7,6,5,4,3,2,1,0];

const descBisector = d3.bisector((d, x) => x - d).left;
const yIndex = descBisector(yData, 2);

console.log(yIndex);

<script src="https://d3js.org/d3.v5.js"></script>

d3.bisector降序排列

1 个答案: