d3.js - 多线图与 d3js 中所需的结果不匹配

Question

我是 d3.js 的新手。我制作了多线图

使用此代码文件

import {
  select,
  csv,
  scaleLinear,
  scaleTime,
  scaleOrdinal,
  extent,
  axisLeft,
  scaleBand ,
  axisBottom,
  line,
  curveBasis,
  nest,
  schemeCategory10,
  timeFormat,
  descending
} from 'd3';

import { colorLegend } from './colorLegend';
const svg = select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const render = data => {
  const title='Profit Comparision by Segment by Region'
 // Region,Sub_Category,Profit
  const xValue = d => d.Sub_Category;
  const xAxisLabel="Sub-Category"

  const yValue = d => d.Profit;
  const circleRadius = 6;
  const yAxisLabel="Profit"
  var barPadding = 0.2;
  const colorValue = d => d.Region;

  const margin = { top: 60, right: 160, bottom: 128, left: 105 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  /*const xScale = scaleLinear()
    .domain(extent(data, xValue))
    .range([0, innerWidth])
    .nice();*/
 var xScale = d3.scalePoint().domain(data.map(xValue))
  .range([0, innerWidth]);
 /* var xScale = scaleOrdinal().domain(extent(data, xValue))
  .range([0, innerWidth]);*/
  const yScale = scaleLinear()
    .domain(extent(data, yValue))
    .range([innerHeight, 0])
    .nice();

  const colorScale = scaleOrdinal(schemeCategory10);

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  const xAxis = axisBottom(xScale)
    .tickSize(-innerHeight)
    .tickPadding(15);

  const yAxis = axisLeft(yScale)
    .tickSize(-innerWidth)
    .tickPadding(10);

  const yAxisG = g.append('g').call(yAxis);
  yAxisG.selectAll('.domain').remove();

  yAxisG.append('text')
      .attr('class', 'axis-label')
      .attr('y', -60)
      .attr('x', -innerHeight / 2)
      .attr('fill', 'black')
      .attr('transform', `rotate(-90)`)
      .attr('text-anchor', 'middle')

      .text(yAxisLabel);

  const xAxisG = g.append('g').call(xAxis)
    .attr('transform', `translate(0,${innerHeight})`);

    xAxisG
          .call(xAxis)
                .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });
  xAxisG.select('.domain').remove();

  xAxisG.append('text')
      .attr('class', 'axis-label')
      .attr('y', 110)
      .attr('x', innerWidth / 2)
      .attr('fill', 'black')
      .text(xAxisLabel);

  const lineGenerator = line()
    .x(d => xScale(xValue(d)))
    .y(d => yScale(yValue(d)))
    .curve(curveBasis);

  const lastYValue = d =>
    yValue(d.values[d.values.length - 1]);

  const nested = nest()
    .key(colorValue)
    .entries(data)
    .sort((a, b) =>
      descending(lastYValue(a), lastYValue(b))
    );

  console.log(nested);

  colorScale.domain(nested.map(d => d.key));

  g.selectAll('.line-path').data(nested)
    .enter().append('path')
      .attr('class', 'line-path')
      .attr('d', d => lineGenerator(d.values))
      .attr('stroke', d => colorScale(d.key));

  g.append('text')
      .attr('class', 'title')
      .attr('y', -10)
      .text(title);

  svg.append('g')
    .attr('transform', `translate(820,121)`)
    .call(colorLegend, {
      colorScale,
      circleRadius: 10,
      spacing: 38,
      textOffset: 20
    });
};


csv('data4.csv')
  .then(data => {
    data.forEach(d => {
       // Region,Sub_Category,Profit
        d.Profit = +d.Profit;

    });
    render(data);
  });

此多线图与在同一数据上绘制的实际结果不匹配。这里这张图片在实际数据上的结果是一样的

我如何才能像结果一样将此作为我的多线图。需要对代码进行哪些更改。这是vizhub代码的链接

更新：

我按字母顺序对它们进行过滤和排序，并按降序对利润进行排序。但我得到了一个不同的图表而不是所需的结果

我怎样才能得到所需的结果？

标签： d3.jssvg