javascript - D3条形图图形表示问题

Question

我试图通过调用 JSON API 中的数据来使用 D3 制作条形图，我能够使单个条形可见，但无法使其他条形可见。我希望酒吧的放置存在一些问题。

开发者工具中可以看到不同的矩形，但所有矩形都出现在同一个位置。

任何帮助将不胜感激。

// javascript

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

// Get the data from the JSON api 
d3.json("https://api.covid19india.org/data.json")
    .then( data => {

        // Store the data in two variales
        var stateNames = [];
        var confirmedCases = [];
        for (let i=1; i <= 10; i++){ //i <= (data.statewise.length) - 1
                stateNames.push(data.statewise[i].state);
                confirmedCases.push(+(data.statewise[i].confirmed));
            }
        //console.log(stateNames);
        //console.log(confirmedCases);
        // Max number of cases
        let sortedData = [...confirmedCases];
        let sortedCases = sortedData.sort(function(a,b){
            return a-b;
        })

        // Measurement of the SVG Element
        const margin = { top: 20, right: 20, bottom: 20, left: 100};
        const innerWidth = width - margin.left - margin.right; 
        const innerHeight = height - margin.top - margin.bottom;


// Horizontal Visualization of Bar Graph
        // X scale
        const xScale = d3.scaleLinear()
                         .domain([0, sortedCases[sortedCases.length-1]])
                         .range([0, innerWidth]);

        //console.log(xScale.domain()); 
        //console.log(xScale.range());

        const yScale = d3.scaleBand()
                     .domain(stateNames)
                     .range([0, innerHeight])
                     .padding(0.2);

        //console.log(yScale.domain());

        const yAxis = d3.axisLeft(yScale); 

        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(confirmedCases).enter()
            .append('rect')
            .attr('width', xScale)
            .attr('height', 30)



})

引用codepen链接，我已经尝试过

https://codepen.io/Jagat_Nayan/pen/mdepwgZ

Answer 1

您需要定义 y 属性来将状态与 Y asix 相关联，为此，您需要在创建矩形时传递 stateName 和 case。

我创建了一个数组inputData，其中包含stateName及其各自的情况，并在创建矩形时使用它。以下是更新后的工作代码。

// javascript

const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

// Get the data from the JSON api
d3.json("https://api.covid19india.org/data.json").then((data) => {
  var inputData = [];
  for (let i = 1; i <= 10; i++) {
    inputData.push({stateName: data.statewise[i].state, cases:  +data.statewise[i].confirmed})
  }

  // Measurement of the SVG Element
  const margin = { top: 20, right: 20, bottom: 20, left: 100 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;
  //const barWidth = innerWidth;
  //const barPadding = 5;

  // Horizontal Visualization of Bar Graph
  // X scale
  const xScale = d3
    .scaleLinear()
    .domain([0, d3.max(inputData, function(d){ return d.cases; })])
    .range([0, innerWidth]);

  const yScale = d3
    .scaleBand()
    .domain(inputData.map(function(d) { return d.stateName; }))
    .range([0, innerHeight])
    .padding(0.2);

  const yAxis = d3.axisLeft(yScale);

  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(inputData)
    .enter()
    .append("rect")
    .attr("width", function(d) {return xScale(d.cases); })
    .attr("y", function(d) {return yScale(d.stateName); })
    .attr("height", 30);
});

codepen 上的工作图 - https://codepen.io/puneet2412/pen/LYpeOzd