Troubleshooting D3 grouped bar chart grid alignment and resolving console errors

Question

Troubleshooting D3 grouped bar chart grid alignment and resolving console errors

I've been working on a grouped bar chart using D3, but I'm encountering some issues with the display of the bars. Despite my efforts to troubleshoot, I can't seem to pinpoint the exact cause of this problem. The code snippet provided below should give you an idea of what I've implemented so far.

var margin = {
    top: 20,
    right: 30,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var z = d3.scale.category20c();

var svg = d3.select("body").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 + ")");

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");

var data = [{
  "data": [
    [
      "2016-01-21T01:20:00.000Z",
      1.41818181818182
    ],
    [
      "2016-01-21T02:28:00.000Z",
      1.90661764705882
    ],
    [
      "2016-01-21T03:36:00.000Z",
      1.66764705882353
    ],
    [
      "2016-01-21T04:44:00.000Z",
      1.51691176470588
    ],
    [
      "2016-01-21T05:52:00.000Z",
      1.40955882352941
    ],
    [
      "2016-01-21T07:00:00.000Z",
      1.46323529411765
    ],
    [
      "2016-01-21T08:08:00.000Z",
      1.48308823529412
    ],
    [
      "2016-01-21T09:16:00.000Z",
      1.89384615384615
    ]
  ],
  "label": "a"
}, {
  "data": [
    [
      "2016-01-21T01:20:00.000Z",
      4.98701298701299
    ],
    [
      "2016-01-21T02:28:00.000Z",
      5.0
    ],
    [
      "2016-01-21T03:36:00.000Z",
      4.94852941176471
    ],
    [
      "2016-01-21T04:44:00.000Z",
      4.91176470588235
    ],
    [
      "2016-01-21T05:52:00.000Z",
      4.81617647058824
    ],
    [
      "2016-01-21T07:00:00.000Z",
      5.0
    ],
    [
      "2016-01-21T08:08:00.000Z",
      4.94117647058824
    ],
    [
      "2016-01-21T09:16:00.000Z",
      4.96969696969697
    ]
  ],
  "label": "b"
}];


... // The rest of the code structure remains unchanged

text.inner-circle {
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}
text.inner-text {
  font-weight: 400;
  font-size: 36px;
  font-family: 'Metric Regular', 'Metric';
  text-align: center;
  font-style: normal;
  text-transform: uppercase;
}
path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  shape-rendering: crispEdges;
}
.grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
.grid path {
  stroke-width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

I would greatly appreciate any assistance in identifying the root cause of this issue. Plnkr.co

javascript d3.js

Answer 1

Answer №1

Successfully displayed your grid.

y.domain([0, d3.max(d3.merge(ary), function(d) {
  console.log(d.y0 + d.y); //This is NaN = Not a number
  //return d.y0 + d.y;
  return d[1]; //returns grid lines if that is what you want
})]);

Let's address the following part of your script:

layer.selectAll("rect")
  .data(function(d) {
    return d.data;
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x(parseDate.parse(d[0]));
  })
  .attr("y", function(d) {
    console.log(d[1]);
    return y(d[1]); //Note this is returning data
  })
  .attr("height", function(d) {
    return y(d[1]); //Note this is returning data
  })
  .attr("width", x.rangeBand() - 1);

By implementing the above changes to your code, I can see the rectangles without any errors. However, there are some CSS adjustments needed as the bars are not aligned properly with the x-axis. Additionally, you need to include more code for grouping your data effectively.

You may refer to this example of a grouped bar chart for guidance. Upon examining this illustration, it appears that you have a way to differentiate between x0 and x1 (first and second groups). Incorporate this distinction into your code to proceed with creating the next set of rectangles.

Answer 2

Successfully displayed your grid.

y.domain([0, d3.max(d3.merge(ary), function(d) {
  console.log(d.y0 + d.y); //This is NaN = Not a number
  //return d.y0 + d.y;
  return d[1]; //returns grid lines if that is what you want
})]);

Let's address the following part of your script:

layer.selectAll("rect")
  .data(function(d) {
    return d.data;
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x(parseDate.parse(d[0]));
  })
  .attr("y", function(d) {
    console.log(d[1]);
    return y(d[1]); //Note this is returning data
  })
  .attr("height", function(d) {
    return y(d[1]); //Note this is returning data
  })
  .attr("width", x.rangeBand() - 1);

By implementing the above changes to your code, I can see the rectangles without any errors. However, there are some CSS adjustments needed as the bars are not aligned properly with the x-axis. Additionally, you need to include more code for grouping your data effectively.

You may refer to this example of a grouped bar chart for guidance. Upon examining this illustration, it appears that you have a way to differentiate between x0 and x1 (first and second groups). Incorporate this distinction into your code to proceed with creating the next set of rectangles.

Answer 3

Answer №2

Those two errors popping up are as follows:

Error: Invalid value for <rect> attribute y="NaN"
Error: Invalid value for <rect> attribute height="NaN"

Essentially, this is indicating that there's some incorrect math going on (NaN = not a number).

The problematic part of the code looks like this:

.attr("y", function(d) {
  return y(d.y + d.y0);
})
.attr("height", function(d) {
  return y(d.y0) - y(d.y + d.y0);
})

What's the issue? Well, by inserting some console.log() statements into those functions, you'll quickly notice that the attributes you're trying to access are missing.

If you examine the code just before the troublesome calculations:

.data(function(d) {
  return d.data;
})

You've applied a key function to the

d3.selection.data(\[values\[, key\]\])

method, but you haven't actually supplied any relevant data (well, at least none that matters in this context; technically, the function definition itself serves as a data object, which is why no error is raised).

Here's what you should have done:

.data(data) // or maybe you meant .data(ary)

Answer 4

Those two errors popping up are as follows:

Error: Invalid value for <rect> attribute y="NaN"
Error: Invalid value for <rect> attribute height="NaN"

Essentially, this is indicating that there's some incorrect math going on (NaN = not a number).

The problematic part of the code looks like this:

.attr("y", function(d) {
  return y(d.y + d.y0);
})
.attr("height", function(d) {
  return y(d.y0) - y(d.y + d.y0);
})

What's the issue? Well, by inserting some console.log() statements into those functions, you'll quickly notice that the attributes you're trying to access are missing.

If you examine the code just before the troublesome calculations:

.data(function(d) {
  return d.data;
})

You've applied a key function to the

d3.selection.data(\[values\[, key\]\])

method, but you haven't actually supplied any relevant data (well, at least none that matters in this context; technically, the function definition itself serves as a data object, which is why no error is raised).

Here's what you should have done:

.data(data) // or maybe you meant .data(ary)

Troubleshooting D3 grouped bar chart grid alignment and resolving console errors

Answer №1

Answer №2

Similar questions

[Vue alert]: Issue with rendering: "TypeError: Unable to access property 'replace' of an undefined value"

Is the speed of JavaScript procedures stored in MongoDB faster than other databases?

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

After a loop, a TypeScript promise will be returned

Upcoming challenge regarding naming files

Sending a C# variable to an HTML file

Solving the error message: "Objects cannot be used as a React child (found: object with keys {})"

Retrieve specific information from a nested JSON structure and combine it into a unified array

Methods for sending an indexed array object back to a getJSON request with jquery

Tips for moving an element to the end of an array

Tips for sending a Json array to a servlet

Is it possible to have a text box that is partially read-only and partially editable?

Can you share the updated class name for indicating errors in input groups in Bootstrap 4?

Angular - Issue: Unable to locate 'classlist.js'

In Typescript, it is possible to assign properties to an object that are not explicitly defined in the object's type definition

Issue with dynamically adjusting flex box width using JavaScript

Using Angular 2 to assign a pipe dynamically from a variable

What is the best way to store the dom in cache to ensure that the page remains unchanged when navigating back using the back button?

Troubleshooting CORS Problem in VUE JS 3 while Making API Request from Localhost to External API服务

Disabling animations in Reactjs with CSSTransition and Group Transition