0

I am making use of d3.js to visualize data in my Ionic application. I have a touch event, which I use to drag a line and get the coordinates of its intersection with my chart. I managed to get the x-coordinate which represents the date, but I'm struggling to get the continuous y-coordinates. By this, I mean that I am able to find the discrete y-coordinates corresponding to the x-coordinates by looping through the data array, but I want the values "in-between". Please have a look at what I have tried (I call the function drawChart() as soon as the View loads)

private drawChart() {

    let width = 900 - this.margin.left - this.margin.right;
    let height = 500 - this.margin.top - this.margin.bottom;

    /*
        data is in the format: [{date: , value: }]
    */
    let data = this.data;

    let svg = d3.select("#chart")
    .append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 900 500')
    .append("g")
    .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

    let x = d3Scale.scaleTime().range([0, width]);
    let y = d3Scale.scaleLinear().range([height, 0]);
    x.domain(d3Array.extent(this.data, (d) => d.date ));
    y.domain(d3Array.extent(this.data, (d) => d.value ));

    svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate("0 + ", "+ height + ")")
        .call(d3Axis.axisBottom(x));

    svg.append("g")
        .attr("class", "axis axis--y")
        .call(d3Axis.axisLeft(y));

    let line: any = d3Shape.line()
    .x( (d: any) => x(d.date) )
    .y( (d: any) => y(d.value) );

    let path = g.append("path")
        .datum(this.data)
        .attr("class", "line")
        .attr("d", line);

    let cursorLine = svg
        .append("line")
        .attr("stroke-width",3)
        .attr("stroke","black")
        .style("opacity", 0);

    svg.on("touchstart", touched);
    svg.on("touchmove", touched);

    function touched() {

        let d = d3.touches(this);
        svg
        .selectAll("line")
        .data(d)
        .style("opacity", 1);

        svg
        .selectAll("line")
        .attr("x1", (d) => d[0])
        .attr("x2", (d) => d[0])
        .attr("y1", 0)
        .attr("y2", height);

        let formatTime = d3.timeFormat("%Y-%m-%d");
        let dateVal: string = formatTime(xScale.invert(d[0][0])); //x-coordinate of the cursor line
        let val = 0;

        //here, I can only get the y-value of the touch point/cursor line that is available in the data array
        //I need to get all the y-values continuously (not discrete) as I drag the cursor line
        data.forEach(d => {
           if(formatTime(d.date) === dateVal) {
               val = d.value;
            }
        })
    }
}

Any ideas on how I can manage to get the y-values continuously as I drag the cursor line? This would be highly appreciated!

m-rashid
  • 1
  • 1

1 Answers1

0

maybe you can try this

let d = d3.touches(this);

if you can get x coordinate by this

let dateVal: string = formatTime(xScale.invert(d[0][0])); //x-coordinate of the cursor line

can you get y coordinate by this

let dateVal2: string_y = y.invert(d[0][1]); //y-coordinate of the cursor line

i thing d3.touches it semilar to d3.mouse.event can you console.log the d this must contain the y coordinate

KEKUATAN
  • 948
  • 7
  • 21