D3 v4折线与面积图条件着色需求及替代库咨询

Hey there! Let's break this down step by step—first solving your D3 v4 conditional area fill requirement, then sharing alternative visualization libraries that can handle this use case.

First, we need to structure your raw data into a more usable format by combining the daily values, target values, and dates. Then we'll build the chart with logic to hide the area when daily values exceed the target.

Step 1: Structure Your Data #

We'll generate the 2017 monthly dates and pair them with your Chart (daily) and line (target) values:

// Generate 2017 Jan-Dec dates
const dates = d3.range(1, 13).map(month => new Date(2017, month - 1, 1));
// Combine into structured data objects
const data = dates.map((date, index) => ({
  date: date,
  dailyConsValue: Chart[index], // Your original Chart array
  targetConsValue: line[index]  // Your original line array
}));

Step 2: Set Up SVG & Scales #

Define the chart dimensions, margins, and scales (time for x-axis, linear for y-axis):

const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// Create SVG container
const 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})`);

// X-scale (time)
const xScale = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);

// Y-scale (linear) - cover max of daily and target values
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => Math.max(d.dailyConsValue, d.targetConsValue))])
  .range([height, 0]); // Note: D3 y-axis increases upward by default

Step 3: Define Conditional Area Generator #

This is the key part: we'll set the area's bottom boundary (y0) to match the top boundary (y1) when dailyConsValue > targetConsValue, making the area invisible. When the daily value is below or equal to the target, we'll set y0 to the x-axis (so the area fills from the x-axis up to the daily line):

const area = d3.area()
  .x(d => xScale(d.date))
  .y0(d => {
    // Hide area if daily > target: set y0 = y1 (no height)
    return d.dailyConsValue > d.targetConsValue ? yScale(d.dailyConsValue) : yScale(0);
  })
  .y1(d => yScale(d.dailyConsValue))
  .curve(d3.curveMonotoneX); // Optional: smooths the line/area

Step 4: Draw the Chart Elements #

Add the area, daily line, target line, and axes:

// Draw conditional area
svg.append("path")
  .datum(data)
  .attr("fill", "#a8d5e5") // Customize your fill color here
  .attr("d", area);

// Draw daily value line
const dailyLine = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.dailyConsValue));

svg.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "#2c3e50")
  .attr("stroke-width", 2)
  .attr("d", dailyLine);

// Draw target horizontal line
const targetLine = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.targetConsValue));

svg.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "#e74c3c")
  .attr("stroke-width", 2)
  .attr("stroke-dasharray", "5,3") // Dashed line for target
  .attr("d", targetLine);

// Add axes
svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(xScale).ticks(d3.timeMonth.every(1)).tickFormat(d3.timeFormat("%b")));

svg.append("g")
  .call(d3.axisLeft(yScale));

If you're looking for tools that handle this logic with less low-level code, here are great options:

• Chart.js: Lightweight, easy-to-configure library. You can use the fill option with a callback or define dataset properties to conditionally show/hide the area under the line. Perfect for quick, clean charts without deep D3 knowledge.
• Plotly.js: Powerful interactive library. You can define fill: 'tozeroy' and use visible or opacity conditions based on your data values to toggle the area. It also includes built-in hover tooltips and zoom controls out of the box.
• Highcharts: A mature, feature-rich library (free for non-commercial use). Use the zone feature to apply different fill styles based on value ranges, or dynamically adjust the series' fillColor based on your daily vs target condition.
• Observable Plot: A high-level wrapper around D3 with a concise syntax. You can use the area mark with a conditional y1 or fill property to achieve the same effect, and it's great for rapid prototyping.

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