时间戳

首页 > 解决方案 > D3 堆积面积图，x 轴作为月份名称，还带有图例

javascript - D3 堆积面积图，x 轴作为月份名称，还带有图例

问题描述

我正在尝试使用 x 轴作为月份名称构建 D3 堆积面积图，但存在一些错误为 MNaN，并且在 D3 官方网站上，还有从文件（.csv. .json、.tsv 等）加载图表的数据) 但我想从数组中加载数据。工具提示（A \n Total(A) \n % of A）和图例也不可见。我指的是生成堆积面积图的代码：https ://www.d3-graph-gallery.com/graph/stackedarea_template.html

谁能帮我写代码，下面是所需的数据

表数据

所需图表

数组结构：

var data = [
    {
        "Month": "Jan", "A": "372290.4", "B": "9609.42", "C": "5496.94", "D": "4478",
        "E": "508005.08", "F": "188776.25", "G": "6637.87", "H": "0", "I": "109.36", "J": "357361.55", "Total": "1452764.87"
    },
    {
        "Month": "Feb", "A": "739822.97", "B": "19218.84", "C": "12516.24", "D": "8956",
        "E": "1018268.66", "F": "377525.74", "G": "15948.5", "H": "23.46", "I": "969.92", "J": "714723.1", "Total": "2907973.43"
    },
    {
        "Month": "Mar", "A": "1108095.89", "B": "28828.26", "C": "22268.98", "D": "13434",
        "E": "1528299.3", "F": "565977.38", "G": "28712.76", "H": "1027.62", "I": "3067.22", "J": "1072084.65", "Total": "4371796.06"
    },
    {
        "Month": "Apr", "A": "1474738.92", "B": "38727.73", "C": "34389.72", "D": "17981.44",
        "E": "2071177.85", "F": "754827.43", "G": "45430.62", "H": "7307.35", "I": "7312.26", "J": "1429446.2", "Total": "5881339.52"
    },
    {
        "Month": "May", "A": "1834106.67", "B": "49394.68", "C": "52238.77", "D": "23057.93",
        "E": "2585714.03", "F": "931441.48", "G": "66322.02", "H": "20124.51", "I": "13769.13", "J": "1786807.75", "Total": "7362976.97"
    },
    {
        "Month": "Jun", "A": "2186201.94", "B": "65798.97", "C": "74773.06", "D": "31084",
        "E": "3085654.69", "F": "1108985.53", "G": "93788.5", "H": "33374.4", "I": "25559.3", "J": "2144169.3", "Total": "8849389.69"
    },
    {
        "Month": "July", "A": "2537665.76", "B": "87416.04", "C": "107505.33", "D": "40071.93",
        "E": "3561821.35", "F": "1286529.58", "G": "128477.84", "H": "46917.84", "I": "39826.26", "J": "2501530.85", "Total": "10337762.78"
    }
];

标签： javascriptd3.jscharts

解决方案

重用您共享的链接中的一些代码，但使用最新版本的 d3 (v7)，我已经共享了解决方案。适用于您的数组结构。

在 d3 图表中实现工具提示并不是很简单（未包含在附加的代码片段中）。您可以检查这两个示例以实现工具提示（使用 d3.bisect）：

  1. 使用旧 d3 版本 (v3)
  2. 使用较新的版本，而不是最新的 (v5)

const data = [
  {
    Month: 'Jan',
    A: '372290.4',
    B: '9609.42',
    C: '5496.94',
    D: '4478',
    E: '508005.08',
    F: '188776.25',
    G: '6637.87',
    H: '0',
    I: '109.36',
    J: '357361.55',
    Total: '1452764.87',
  },
  {
    Month: 'Feb',
    A: '739822.97',
    B: '19218.84',
    C: '12516.24',
    D: '8956',
    E: '1018268.66',
    F: '377525.74',
    G: '15948.5',
    H: '23.46',
    I: '969.92',
    J: '714723.1',
    Total: '2907973.43',
  },
  {
    Month: 'Mar',
    A: '1108095.89',
    B: '28828.26',
    C: '22268.98',
    D: '13434',
    E: '1528299.3',
    F: '565977.38',
    G: '28712.76',
    H: '1027.62',
    I: '3067.22',
    J: '1072084.65',
    Total: '4371796.06',
  },
  {
    Month: 'Apr',
    A: '1474738.92',
    B: '38727.73',
    C: '34389.72',
    D: '17981.44',
    E: '2071177.85',
    F: '754827.43',
    G: '45430.62',
    H: '7307.35',
    I: '7312.26',
    J: '1429446.2',
    Total: '5881339.52',
  },
  {
    Month: 'May',
    A: '1834106.67',
    B: '49394.68',
    C: '52238.77',
    D: '23057.93',
    E: '2585714.03',
    F: '931441.48',
    G: '66322.02',
    H: '20124.51',
    I: '13769.13',
    J: '1786807.75',
    Total: '7362976.97',
  },
  {
    Month: 'Jun',
    A: '2186201.94',
    B: '65798.97',
    C: '74773.06',
    D: '31084',
    E: '3085654.69',
    F: '1108985.53',
    G: '93788.5',
    H: '33374.4',
    I: '25559.3',
    J: '2144169.3',
    Total: '8849389.69',
  },
  {
    Month: 'July',
    A: '2537665.76',
    B: '87416.04',
    C: '107505.33',
    D: '40071.93',
    E: '3561821.35',
    F: '1286529.58',
    G: '128477.84',
    H: '46917.84',
    I: '39826.26',
    J: '2501530.85',
    Total: '10337762.78',
  },
]

const margin = { top: 60, right: 230, bottom: 50, left: 80 }
const width = 660 - margin.left - margin.right
const height = 400 - margin.top - margin.bottom

const svg = d3
  .select('#my_dataviz')
  .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})`)

const columns = Object.keys(data[0])

data.columns = columns
// List of groups = header of the csv files
const keys = data.columns.slice(1, -1)

const allValueColumns = data.columns.slice(1)

const yExtent = [0, 0]
const dataParsed = data.map(d => {
  const pd = { ...d }
  allValueColumns.forEach(col => {
    pd[col] = parseFloat(d[col])
    yExtent[0] = d3.min([pd[col], yExtent[0]])
    yExtent[1] = d3.max([pd[col], yExtent[1]])
  })
  return pd
})

// color palette
const color = d3.scaleOrdinal().domain(keys).range(d3.schemeSet2)

// stack the data
const stackedData = d3.stack().keys(keys)(dataParsed)

const xDomain = dataParsed.map(d => d.Month)
const x = d3.scalePoint().domain(xDomain).range([0, width])

const xAxis = svg
  .append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(x).ticks(5))

const y = d3.scaleLinear().domain(yExtent).range([height, 0])

const area = d3
  .area()
  .x(function (d) {
    return x(d.data.Month)
  })
  .y0(function (d) {
    return y(d[0])
  })
  .y1(function (d) {
    return y(d[1])
  })

svg
  .append('g')
  .selectAll('path')
  .data(stackedData)
  .enter()
  .append('path')
  .attr('class', function (d) {
    return `area ${d.key}`
  })
  .style('fill', function (d) {
    return color(d.key)
  })
  .attr('d', area)
  
  svg.append('g').call(d3.axisLeft(y).ticks(5))
          <div id="my_dataviz" ></div>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js" integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

推荐阅读