Flask+MongoDB环境下dc.js图表无法加载技术求助

Hey there, let's figure out why your DC.js chart isn't loading—there are a few key issues in your setup we can fix step by step:

1. Missing DC.js Stylesheet #

DC.js depends on its own CSS to render charts properly, and you haven't included it in your HTML. Without this stylesheet, the chart elements might exist in the DOM but be completely invisible. Add this link to your <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.0/dc.min.css" integrity="sha512-64FybP40YH+0qKfG55i5l6p6XK552dG3101x3898tP8B5a60W1aR7E0e5H2Z2z+41W5lL3Y9X8e3x3Qj751uQQ==" crossorigin="anonymous">

2. Outdated D3 Scale Syntax #

You're using D3 v6, which replaced the old d3.scale.ordinal() with d3.scaleOrdinal(). This syntax change breaks your x-axis configuration.

3. Incorrect Crossfilter Group Logic #

Right now, dim.group() only counts how many times each book title appears in your data—but you want to display the review_rating value for each book. Since your sample data has one rating per book, use reduceSum to pull the correct rating value:

var group = dim.group().reduceSum(d => d.review_rating);

4. Queue.js is Outdated for D3 v6 #

D3 v6 uses Promises for async operations, so queue.js is unnecessary here. We can rewrite your data loading logic using D3's native promise chain instead.

5. Minor Chart Config Tweaks #

Adding a y-axis label and ensuring x-axis ticks render correctly will make your chart more usable.

Fixed graph.js Code #

Here's the updated version of your graph.js with all fixes applied:

// Use D3's native promise-based data loading instead of queue.js
d3.json("/data")
  .then(projectsJson => {
    var ndx = crossfilter(projectsJson);
    show_rating_for_title(ndx);
    dc.renderAll();
  })
  .catch(error => {
    console.error("Error loading or processing data:", error);
  });

function show_rating_for_title(ndx) {
  // Use arrow function instead of dc.pluck for clearer syntax
  var dim = ndx.dimension(d => d.book_title);
  // Group to fetch the review_rating value for each book
  var group = dim.group().reduceSum(d => d.review_rating);

  dc.barChart('#book-rating')
    .width(400)
    .height(300)
    .margins({ top: 10, right: 50, bottom: 30, left: 50 })
    .dimension(dim)
    .group(group)
    .transitionDuration(500)
    // Updated D3 v6 ordinal scale syntax
    .x(d3.scaleOrdinal())
    .xUnits(dc.units.ordinal)
    .elasticY(true)
    .xAxisLabel('Books Title')
    .yAxisLabel('Review Rating') // Add y-axis label for clarity
    .xAxis().tickFormat(d => d); // Ensure x-axis ticks display correctly
}

Updated HTML Head Section #

Make sure your <head> includes the DC.js stylesheet (add it alongside your other CSS links):

<head>
    <!-- ... your existing meta tags, Bootstrap CSS, etc. ... -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.0/dc.min.css" integrity="sha512-64FybP40YH+0qKfG55i5l6p6XK552dG3101x3898tP8B5a60W1aR7E0e5H2Z2z+41W5lL3Y9X8e3x3Qj751uQQ==" crossorigin="anonymous">
    <!-- ... your existing scripts ... -->
</head>

Final Check #

After applying these changes:

1. Restart your Flask server to ensure all updates take effect
2. Clear your browser cache (to load the new CSS and JS files)
3. Open the dev tools console—any errors will now show up in the catch block, and your bar chart should render correctly, displaying each book's review rating.

The core issues were missing CSS, outdated D3 syntax, incorrect grouping logic, and using an obsolete async library. With these fixes, your chart should work as expected!

内容的提问来源于stack exchange，提问作者Alessio Centamore