Get Y value with given X value

So I have this chart (see sceenshot) and now I would like to just get the Y value using a given X value.

I looked into this solution but it would only return a value of 1.3685770182056411e-13

As I am using D3 in Backbone it looks a bit different.
here is the code for the chart:

    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;
}

and this is the chart:
enter image description here

Now for my question: is there a way to get the y-value of a given x-point in this chart?

Source: New Questions

1 Comment

  1. Digin Dominic

    with some additions I can now get the data like this:

    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;

    }

    Reply

Leave a Reply