获得给定X值的Y值

Question

所以我有这个图表（参见sceenshot），现在我想使用给定的X值得到Y值。

我查看了this solution，但它只返回值1.3685770182056411e-13

由于我在Backbone中使用D3，它看起来有点不同。 这是图表的代码：

    var that = this;
    var graphObj = APP.floodRiskScenarioModel.attributes.response.options.dataRows;

    var Depth = graphObj[graphObj.length-1].Depth;
    var maxExceedance = graphObj[0].exceedance;

    $('#floodRiskChart').html('');

    var margin = {top: 12, right: 5, bottom: 50, left: 67},
        width = 430 - margin.left - margin.right,
        height = 215 - margin.top - margin.bottom;

    var x = d3.scale.linear()
        .domain([0, Depth])
        .range([0, width]);

    var y = d3.scale.linear()
        .domain([0, maxExceedance])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.line()
        .interpolate('step-before')
        .x(function(d) { return x(d.Depth); })
        .y(function(d) { return y(d.exceedance); });

    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            var html = "<strong>Kans:</strong> <span>" + d.exceedance + " /jr </span><br/>";
                html += "<strong>Diepte:</strong> <span>" + d.Depth + " m</span>";
            return html;
        });

    //hier stond oook #chartDiv
    var svg = d3.select("#floodRiskChart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.call(tip);

    graphObj.forEach(function(d) {
        d.exceedance = parseFloat(+d.exceedance);
        d.Depth = parseFloat(+d.Depth);
    });

    //y.domain(d3.extent(graphObj, function(d) { return parseFloat(d.exceedance); }));


    svg.selectAll("dot")
        .data(graphObj)
        .enter().append("circle")
        .attr("r", 4)
        .attr("cx", function(d) { return x(d.Depth); })
        .attr("cy", function(d) { return y(d.exceedance); })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("x", "25%")
        .attr("dy", "3em")
        .html("Depth");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -50)
        .attr("dx", 0)
        .style("text-anchor", "end")
        .html("Chance");

    svg.append("path")
        .datum(graphObj)
        .attr("id", "myPath")
        .attr("class", "line")
        .attr("d", line);

    console.log(this.getValue(0.025, document.getElementById("myPath"), 0.001));


getValue: function(x, path, error){

    var length_end = path.getTotalLength()
        , length_start = 0
        , point = path.getPointAtLength((length_end + length_start) / 2) // get the middle point
        , bisection_iterations_max = 50
        , bisection_iterations = 0;

    error = error || 0.01;

    while (x < point.x - error || x > point.x + error) {
        // get the middle point
        point = path.getPointAtLength((length_end + length_start) / 2);

        if (x < point.x) {
            length_end = (length_start + length_end)/2
        } else {
            length_start = (length_start + length_end)/2
        }

        // Increase iteration
        if(bisection_iterations_max < ++ bisection_iterations)
            break;
    }

    return point.y;
}

这是图表：

现在我的问题是：有没有办法在这张图表中获得给定x点的y值？

Answer 1

有了一些补充，我现在可以得到这样的数据：

var graphObj = this.graphObject = APP.floodRiskScenarioModel.attributes.response.options.dataRows;

 var y = this.y0 = d3.scale.linear()
        .domain([0, maxExceedance])
        .range([height, 0]);

this.bisect = d3.bisector(function(d) { return d.waterDepth; }).left;

svg.append("path")
        .datum(graphObj)
        .attr("id", "myPath")
        .attr("class", "line")
        .attr("d", line);




getChanceData: function(x) {
    var bisectItem = this.graphObject[this.bisect(this.graphObject, x)];

    return bisectItem != undefined ? bisectItem.exceedance : 0;

}