时间戳

首页 > 解决方案 > 条形超出 d3 条形图中的图表范围

javascript - 条形超出 d3 条形图中的图表范围

问题描述

分组条形图中的条形图在 x 轴上正确定位，但即使我认为我有一个预定义的范围，一些条形图总是超出图表，某些y值等于例如巨大的 -31199600。

代码沙盒

// chart dimensions
const height = 600;
const colorScale = d3.scaleOrdinal().range(['#4FD8DD']);
const itemWidth = 140;
const barWidth = 3;
const barMargin = 5;
const xMargin = 80;
const yMargin = 150;

 const svg = svgEl
      .append('g')
      .attr('class', 'grouped-bar-chart')
      .attr('width', storeData.dataset.length * itemWidth + xMargin * 2)
      .attr('height', height);

    const xScale = d3
      .scaleBand()
      .domain(storeData.dataset.map((d) => d.city))
      .range([0, storeData.dataset.length * itemWidth]);

    const yScale = d3.scaleLinear().range([-120, height - 200]);

    yScale.domain([d3.max(storeData.dataset[0].values, (d) => d.value), 0]);

    // draw chart
    svg
      .selectAll('g.city')
      .data(storeData.dataset, (d) => d.city)
      .enter()
      .append('g')
      .classed('city', true)
      .attr(
        'transform',
        (d) =>
          `translate(${xMargin + xScale(d.city) + itemWidth / 2},${yMargin})`
      )
      .each(function (d) {
        const city = d3.select(this);
        for (let i = 0; i < d.values.length; i++) {
          const y = yScale(d.values[i].value);
          console.log(
            'yScale(d.values[i].value) --->',
            yScale(d.values[i].value)
          );
          console.log('yScale(0) --->', yScale(0));
          const height = yScale(0) - y;
          const x = (i - d.values.length / 2) * (barWidth + barMargin);
          city
            .append('rect')
            .attr('x', x)
            .attr('y', y)
            .attr('width', barWidth)
            .attr('height', height)
            .style('fill', colorScale(i));
        }
      });

标签： javascriptd3.jsdata-visualizationbar-chart

解决方案

此代码将 5000 设置为最大值：

const maxValue = d3.max(storeData.dataset[0].values, (d) => d.value);
yScale.domain([maxValue, 0]);

实际上，最大值要高得多（我得到 400000000）：

const maxValue = storeData.dataset.reduce((maxAll, item) => {
  return item.values.reduce((maxItem, val) => 
    Math.max(maxItem, val.value), maxAll);
}, 0);
    
console.log('MAX VALUE: ', maxValue);

设置一个正确的值作为domain上限yScale应该可以解决问题。

推荐阅读