D3新手求助：如何导入类列表数据并按指定格式解析？

Hey there! Let's work through this together—since you're new to D3, getting data from Python into the exact structure you need ({field:fieldname, data:[1,2,3,4...]}) can feel a bit frustrating at first, but we've got two solid approaches to fix this:

1. Generate JSON Directly from Python (Simplest Approach) #

JSON is native to JavaScript, so this is the most straightforward way to get your data into the exact format D3 can use without extra parsing. Here's how to do it:

Python Code (Generate the JSON) #

First, construct your data in Python to match the structure you want, then save it as a .json file:

import json

# Replace with your actual generated data
your_data = {
    "field": "monthly_sales",
    "data": [1200, 1500, 1800, 1300, 2000, 1700]
}

# Save to a JSON file (ensure no encoding issues with utf-8)
with open("visualization_data.json", "w", encoding="utf-8") as f:
    json.dump(your_data, f, indent=2)

D3 Code (Load and Use the JSON) #

In your JavaScript file, use d3.json() to load the file—since D3 v6+, this returns a Promise, so you can use async/await for cleaner code:

async function loadAndVisualize() {
    const data = await d3.json("visualization_data.json");
    
    // Now you can use the data directly!
    console.log(`Field name: ${data.field}`);
    console.log(`Data array: ${data.data}`);
    
    // Quick example visualization (adjust as needed)
    d3.select("body")
      .selectAll("div.bar")
      .data(data.data)
      .enter()
      .append("div")
      .attr("class", "bar")
      .style("height", d => `${d / 10}px`)
      .style("width", "30px")
      .style("background", "coral")
      .style("margin", "0 5px");
}

loadAndVisualize();

2. Fix CSV Parsing If You Want to Stick with CSV #

If you already have CSV data and want to make it work, the issue is that CSV is tabular by default—you just need to transform it into your target structure. Let's cover the two common CSV formats you might have:

Case A: CSV with One Row (Field + All Data Points) #

Your Python-generated CSV (sales_data.csv) might look like this:

field,jan,feb,mar,apr,may,jun
monthly_sales,1200,1500,1800,1300,2000,1700

D3 Code to Parse This CSV #

async function parseCSVData() {
    const csvRows = await d3.csv("sales_data.csv");
    const firstRow = csvRows[0];
    
    // Convert the tabular CSV into your desired structure
    const formattedData = {
        field: firstRow.field,
        data: Object.values(firstRow)
            .slice(1) // Skip the "field" column
            .map(Number) // Convert string values to numbers
    };
    
    console.log(formattedData); // Matches your required structure
    // Use formattedData in your visualization here
}

parseCSVData();

Case B: CSV with Multiple Rows (Field + Single Value per Row) #

If your CSV looks like this (each row is one data point tied to the same field):

field,value
monthly_sales,1200
monthly_sales,1500
monthly_sales,1800
monthly_sales,1300
monthly_sales,2000
monthly_sales,1700

D3 Code to Parse This CSV #

async function parseCSVData() {
    const csvRows = await d3.csv("sales_data.csv");
    
    // Extract field name from the first row, collect all values as numbers
    const formattedData = {
        field: csvRows[0].field,
        data: csvRows.map(row => Number(row.value))
    };
    
    console.log(formattedData); // Your desired structure
}

parseCSVData();

Either approach should get you exactly the data structure you need for your D3 visualization. The JSON method is definitely the most direct since it skips extra parsing steps—perfect when you're just starting out with D3!

内容的提问来源于stack exchange，提问作者Samson Liu