Проблема с графическим представлением гистограммы D3 - PullRequest
Новая
       50

Проблема с графическим представлением гистограммы D3

0 голосов
/ 05 мая 2020

Я пытался создать столбчатую диаграмму с использованием D3, вызывая данные из JSON API, я смог сделать видимой одну полосу, но не смог сделать видимыми другие полосы. Я надеюсь, что возникла проблема с размещением полос.

В средстве разработчика видны разные прямоугольники, но все они появляются в одном месте.

Любая помощь будет принята с благодарностью. 

// 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

1 Ответ

1 голос
/ 05 мая 2020

Вам нужно определить свойство 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);
});

Рабочий график на коде - https://codepen.io/puneet2412/pen/LYpeOzd

...