错误：<rect>属性和预期长度d3.js

2024-05-17 • 问答

我是d3.js的新手，并且我有一个示例CSV文件

import { 
  select,csv,scaleLinear,max,scaleBand,axisLeft,axisBottom} 
from 'd3';

const svg = select('svg');

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

const render = data =>{
  const margin = { top: 20,right: 40,bottom: 20,left: 100 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const ChinaFilter = data.filter(function(d){ 
    return d.country.match ('China');
  });
  const IndonesiaFilter = data.filter(function(d){ 
    return d.country.match ('Indonesia');
  });
  const RussiaFilter = data.filter(function(d){ 
    return d.country.match ('Russia');
  });
  var Filter = [ChinaFilter.length,IndonesiaFilter.length,RussiaFilter.length];
  var countryFilter = ['China','Indonesia','Russia'];


  const xScale = scaleLinear()
    .domain([0,max(Filter)])
    .range([0,innerWidth]);


  const yScale = scaleBand()
    .domain(countryFilter)
    .range([0,innerHeight])
        .padding(0.1);


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

  g.append('g').call(axisLeft(yScale));
  g.append('g').call(axisBottom(xScale))
    .attr('transform',`translate(0,${innerHeight})`);

    g.selectAll('rect').data(data)
    .enter().append('rect')
    .attr('y',yScale(countryFilter))
    .attr('width',xScale(Filter))
    .attr('height',yScale.bandwidth());


};

csv('data.csv').then(data => {
    render(data);
});

完成并显示x轴和y轴后，无法创建和显示对应的条并显示该条。这是完整的代码

{{1}}

实际结果[1]：https://i.stack.imgur.com/rFJNU.png

以条形图格式显示的预期产出应为（China，3）（Indonesia，3）（Russia，4）

您的代码中有几个问题，主要是data数组。如果这是您的CSV：

country,year
China 1,1998-12-1
China 2,1999-12-1
China 3,2000-12-1
Indonesia 1,1999-12-1
Indonesia 2,1999-12-1
Indonesia 3,1998-12-1
Russia 1,1999-12-1
Russia 2,1998-12-1
Russia 3,1999-12-1
Russia 4,1998-12-1

这意味着您的data是一个包含10个对象的数组，因此我们希望在条形图中看到10条。事实并非如此。由于您只想显示每个国家的记录数，所以我们创建一个正确的数据数组，这里命名为correctData：

var countryFilter = ['China','Indonesia','Russia'];
var correctData = countryFilter.map(function(d) {
    return {
      country: d,length: data.filter(function(e) {
        return e.country.match(d);
      }).length
    }
});

然后，我们更改比例：

const xScale = d3.scaleLinear()
    .domain([0,d3.max(correctData,function(d) {
      return d.length
    })])
    .range([0,innerWidth]);

const yScale = d3.scaleBand()
    .domain(correctData.map(function(d) {
      return d.country
    }))
    .range([0,innerHeight])
    .padding(0.1);

最后，使用基准创建条形：

g.selectAll('rect').data(correctData)
    .enter().append('rect')
    .attr('y',function(d) {
      return yScale(d.country)
    })
    .attr('width',function(d) {
      return xScale(d.length)
    })
    .attr('height',yScale.bandwidth());

一些最终的考虑因素：我不清楚您为什么混用var和const。另外，请避免在CSV中留空格。

这是您所做的更改的代码：

const csv = `country,1998-12-1`;

const data = d3.csvParse(csv);

const svg = d3.select('svg');

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

const render = data => {
  const margin = {
    top: 20,right: 40,bottom: 20,left: 100
  };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  var countryFilter = ['China','Russia'];
  var correctData = countryFilter.map(function(d) {
    return {
      country: d,length: data.filter(function(e) {
        return e.country.match(d);
      }).length
    }
  });

  const xScale = d3.scaleLinear()
    .domain([0,innerWidth]);

  const yScale = d3.scaleBand()
    .domain(correctData.map(function(d) {
      return d.country
    }))
    .range([0,innerHeight])
    .padding(0.1);

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

  g.append('g').call(d3.axisLeft(yScale));
  g.append('g').call(d3.axisBottom(xScale))
    .attr('transform',`translate(0,${innerHeight})`);

  g.selectAll('rect').data(correctData)
    .enter().append('rect')
    .attr('y',yScale.bandwidth());
};

render(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="200"></svg>

错误：<rect>属性和预期长度d3.js

wensk2008 回答：错误：<rect>属性和预期长度d3.js

大家都在问