如何修改D3中Mike Bostock的Marimekko图表代码实现分类X轴？

Hey there! I get it—Marimekko charts are tricky, especially when adapting Mike’s examples to your needs. Let’s break this down clearly, because there’s a small gotcha here: Marimekko columns have uneven widths, so a standard ordinal scale (which creates equal-width bands) won’t work perfectly. Instead, we’ll tweak the original linear scale setup to add centered category labels, keeping the uneven column widths intact.

Step 1: Keep Your Linear Scale (With Better Margin Handling) #

We still need the linear scale to calculate those uneven column widths—that’s core to how Marimekko charts work. Update it to play nicely with margins (this makes your layout cleaner):

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

// Linear scale maps percentage values (0-1) to pixel positions
var x = d3.scale.linear()
  .domain([0, 1]) // Represent 0-100% as decimal values
  .range([margin.left, width + margin.left]); // Align with left/right margins

Step 2: Prep Your Data with Categories #

Make sure your data includes each category’s name, plus its starting and ending percentage values (x0 = cumulative percentage up to the column, x1 = x0 plus the column’s width percentage). Example data structure:

var marimekkoData = [
  {category: "Electronics", x0: 0, x1: 0.25, yValues: [...]},
  {category: "Apparel", x0: 0.25, x1: 0.6, yValues: [...]},
  {category: "Home Goods", x0: 0.6, x1: 0.85, yValues: [...]},
  {category: "Beauty", x0: 0.85, x1: 1, yValues: [...]}
];

Step 3: Add Centered Category Labels (Replace Percentage Ticks) #

Instead of using x.ticks(10) to add percentage labels, we’ll bind our category data and place each label exactly at the center of its column:

// Add category labels to the X axis area
var categoryLabels = svg.selectAll(".category-label")
  .data(marimekkoData)
  .enter()
  .append("text")
  .attr("class", "category-label")
  // Calculate the column's center: average x0 and x1, map to pixels
  .attr("x", function(d) { return x((d.x0 + d.x1) / 2); })
  // Position labels below the chart (adjust the 20 to tweak vertical spacing)
  .attr("y", height + margin.top + 20)
  // Ensure text is centered horizontally
  .attr("text-anchor", "middle")
  // Use the category name as the label
  .text(function(d) { return d.category; });

Step 4: Hide the Original Percentage Ticks #

If you don’t want the original percentage scale cluttering things up, update the X axis generator to hide ticks and labels (you can keep the axis line if you want):

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat("") // Hide percentage text labels
  .tickSize(0); // Hide tick lines (remove this if you want to keep the axis line)

// Add the cleaned-up axis to your SVG
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (height + margin.top) + ")")
  .call(xAxis);

Step 5: Update Column Drawing (If Needed) #

Double-check that your column rectangles use the linear scale to position themselves correctly:

svg.selectAll(".column")
  .data(marimekkoData)
  .enter()
  .append("rect")
  .attr("class", "column")
  .attr("x", function(d) { return x(d.x0); })
  .attr("width", function(d) { return x(d.x1) - x(d.x0); })
  .attr("y", margin.top)
  .attr("height", height)
  .style("fill", function(d) { /* Add your color logic here */ });

This setup keeps the uneven column widths that make Marimekko charts so useful, while replacing the percentage ticks with clean, centered category labels—just like the example you referenced.

内容的提问来源于stack exchange，提问作者Ben Mayo