1

First time using the d3 library, I am pulling my data from a local object structured below. Attempting to show the data but the 0 index data is not being shown (see in screenshot) despite the data array having content. I have tried many things including reading other stack questions for similar issues (such as D3 bar chart not showing first element in array), but their solutions are not working for me since my d3 is structured differently. I have been stuck on this for over 3 hours now and any help is appreciated.

Data array enter image description here

roundDataArr = [...roundDataArr, {'round': roundNumber, 'data': finalRoundTime}]

1st object not displayed on graph: enter image description here

Relevant code:

 function displayGraph() {
        var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 575 - margin.left - margin.right,
            height = 350 - margin.top - margin.bottom;
        
        var x = d3.scaleLinear()
            .domain([0, d3.max(roundDataArr, function(d) { return d.round; })])
            .range([0, width]);
        
        var y = d3.scaleLinear()
            .domain([0, d3.max(roundDataArr, function(d) { return d.data; })])
            .range([height, 0]);
        
        var xAxis = d3.axisBottom()
            .scale(x);
        
        var yAxis = d3.axisLeft()
            .scale(y);
        
        var area = d3.area()
            .x(function(d) { return x(d.round); })
            .y0(height)
            .y1(function(d) { return y(d.data); });
        
        var valueline = d3.line()
            .x(function(d) { return x(d.round); })
            .y(function(d) { return y(d.data); });
        
        var svg = d3.select(".tfny-graphWrapper")
            .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.append("path")
            .datum(roundDataArr)
            .attr("class", "area")
            .attr("d", area);
        
        svg.append("path")
            .datum(roundDataArr)
            .attr("class", "line")
            .attr("d", valueline);
        
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
        
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
    }

And the wrapper div is appended to the DOM through Javascript with this code:

let graphWrapper = document.createElement("div")
        graphWrapper.classList.add("tfny-graphWrapper");
        resultPage.appendChild(graphWrapper);
Xenvi
  • 887
  • 5
  • 10
  • 2
    Your x axis runs from 0 - 4, (5 data points), but you only have 4 data points (rounds 1,2,3,4) both in the data array and in your image. You aren't using the index to position the data points, so the fact that your first data point is at index 0 doesn't matter. You are positioning the data according to round, not index. However, it's not clear if you want to set the x scale domain to 1 (`d3.scaleLinear().domain([1,d3.max...`) or if you want to use the index instead of d.round, in which case you'd modify the area generator x accessor (`.x(function(d,i) { return x(i); })`) – Andrew Reid Sep 27 '20 at 21:44
  • @AndrewReid Thank you so much for your response! That makes sense, I didn't think about that aspect. The first solution you brought up (changing scaleLinear domain to 1) fixes the graph for all rounds except the first. The first round always displays an empty graph before it populates. I'll investigate some more but that was a very helpful pointer, thank you! EDIT: Just solved the issue, I just had to add a static data for round 0 when I initiated the variable (let roundDataArr = [{'round': 0, 'data': 0}]). Works like a charm, thank you Andrew! – Xenvi Sep 27 '20 at 23:04

0 Answers0