如何用D3.js重塑数据适配图表？原生JS方法是否高效？

First off, let's break down your questions clearly and give you practical solutions:

Can you use your existing data directly to draw a chart? #

Absolutely! You don’t have to reshape your data to match the example format—whether you can skip transformation depends on which D3 tools you’re using.

For core chart types like lines, areas, or scatter plots, D3’s generators (like d3.line or d3.area) let you define custom accessor functions to read your nested array data directly. Instead of expecting d.x and d.y, you can tell D3 to grab the first and second elements of each sub-array:

const lineGenerator = d3.line()
  .x(d => d[0]) // Use the first element as the x-value
  .y(d => d[1]); // Use the second element as the y-value

// Render each series directly from your original data
Object.keys(originalData).forEach(key => {
  svg.append("path")
    .datum(originalData[key])
    .attr("d", lineGenerator)
    .attr("class", `series-${key}`);
});

This lets you use your raw data without any reshaping at all.

Does D3 have built-in methods for reshaping data? #

Yes! D3 has a set of utility functions designed to simplify data transformations, making your code more concise and idiomatic.

One of the most useful here is d3.entries(), which converts an object into an array of key-value pairs. You can chain this with map() to reshape your data in one clean step:

const reshapedData = d3.entries(originalData).map(({ key, value }) => ({
  id: key,
  values: value.map(([x, y]) => ({ x, y }))
}));

This achieves the exact same result as your native JS code but with less boilerplate. D3’s utilities are optimized for performance, so efficiency won’t be an issue here.

A quick tweak to your native JS implementation #

Your original code works perfectly, but you can make it more concise (and just as efficient) using native array map() instead of forEach():

const reshapedData = Object.keys(originalData).map(key => ({
  id: key,
  values: originalData[key].map(([x, y]) => ({ x, y }))
}));

This functional style avoids manual array pushing and is easier to read and maintain.

内容的提问来源于stack exchange，提问作者Martin Burch