Рубрики
Без рубрики

Сортируемая барная карта с D3.JS

Этот график изготовлен на основе примера примера Майка Бостока: https: //observablehq.com/@d3/ssortable-ba … с меткой D3JS, Javascript, DataVisualization.

Эта диаграмма сделана на основе примера примера Майка Бостока: https://observablehq.com/@d3/ssortable-bar-chart#chart

Я переписал код, реализуя свою собственную логику. Давайте быстро поймем данные, стоящие за этим кодом, прежде чем мы погрузимся в шаги создания диаграммы.

Это небольшой набор данных с алфавитами и их частотой использования словами.

Вот ссылка на набор данных .

Компоненты должны быть добавлены:

  • Добавьте контейнерный Div, который удерживает элемент SVG и его содержимое
  • Добавьте раскрывающуюся поле «Выбрать», которая позволяет выбирать параметры для сортировки стержней
  • Наконец, добавьте элемент SVG, где вы нарисуете свою карту

Вот полный код для создания этой диаграммы. Я объясню каждый раздел, как и при необходимости.

HTML -файл: index.html




  
    
    
    
    
    Sorted Bar Charts
  
  
    
Sortable Bar charts

    

      This chart implements bar chart sorting with D3.js.

Если вы соблюдаете в этом HTML -файле, я создал два DIV. Один удерживает раскрывающееся вниз, а другой держит элемент SVG.

Файл CSS: Style.css

.label {
  margin-left: 15px;
}

#selection {
  font-size: 19px;
  margin-left: 15px;
}

Этот файл CSS стилизирует раскрывающийся вниз и его ярлык.

Файл JavaScript: script.js

const w = 1000;
const h = 500;

const margins = { top: 50, left: 100, bottom: 100, right: 100 }
const innerWidth = w - margins.left - margins.right;
const innerHeight = h - margins.top - margins.bottom;

const url = "https://gist.githubusercontent.com/learning-monk/96c71857dcfc348ecbcda5cb4a90163a/raw/69fa895f7b5f2d99d236762969c46b1a9c47604a/alphabet.csv";

d3.csv(url).then((data, error) => {
  if (error) throw error;
  // console.log(data);

  data.forEach(d => {
    d.letter = d.letter;
    d.frequency = +d.frequency;
  });

  // Create a select dropdown
  const mySelection = document.getElementById("selectMe");

  d3.select(mySelection).append("span").append("p").attr("class", "label").text("How should these bars sorted?").style("font-weight", "bold").style("color", "red").style("font-size", "25px");

  const selectItems = ["Alphabetically", "Ascendingly", "Descendingly"];

  // Create a drop down
  d3.select(mySelection)
    .append("span")
    .append("select")
    .attr("id", "selection")
    .attr("name", "tasks")
    .selectAll("option")
    .data(selectItems)
    .enter()
    .append("option")
    .attr("value", d => d)
    .text(d => d);

  // When the page loads, the chart which sorted alphabetically loads by default
  document.addEventListener("DOMContentLoaded", myChart()); 


  // Chart changes based on drop down selection
  d3.select("#selection").on("change", function() {
    const selectedOption = d3.select(this).node().value;
    if (selectedOption == "Ascendingly") {
      data.sort((a,b) => {
        return d3.ascending(a.frequency, b.frequency)
      }) 
    } else if (selectedOption == "Descendingly") {
      data.sort((a,b) => {
        return d3.descending(a.frequency, b.frequency)
      })
    } else if (selectedOption == "Alphabetically") {
      data.sort((a,b) => {
        return d3.ascending(a.letter, b.letter)
      })
    }
    myChart();
  })

  function myChart () {
    // Append SVG to this DIV
    const chartDIV = document.createElement("div");

    // Create scales
    const xScale = d3.scaleBand()
    .domain(data.map((d) => d.letter))
    .rangeRound([0, innerWidth])
    .paddingInner(0.05);

    const yScale = d3.scaleLinear()
      .domain([0,d3.max(data, d => d.frequency)]).nice()
      .range([innerHeight, 0]);

    const xAxis = d3.axisBottom().scale(xScale);

    const yAxis = d3.axisLeft().scale(yScale);

    const svg = d3.select(chartDIV)
      .append("svg")
      .attr("viewBox", [0,0,w,h]);

    const mainG = svg
      .append("g")
      .attr("transform", `translate(${margins.left}, ${margins.top})`);

    const g = mainG
      .selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", `translate(15,0)`);

    g.append("rect")
      .attr("class", "bars")
      .attr("x", d => xScale(d.letter) - innerWidth/data.length/2)
      .attr("y", d => yScale(d.frequency))
      .attr("width", innerWidth/data.length-1.5)
      .attr("height", (d) => innerHeight - yScale(d.frequency))
      .attr("fill", d => d.frequency == d3.max(data, d => d.frequency) ? "#f4c430" : "green")
      .append("text")
        .attr("x", 5*3)
        .attr("y", (d,i) => i*5)
        .text(d => d.frequency);

    mainG
      .append("g")
      .call(xAxis)
      .attr("transform", `translate(0, ${innerHeight})`);

    mainG
      .append("g")
      .call(yAxis);

    // This code will redraw charts based on dropdown selection. At any point in time, chartContainer DIV only contains one chart. The charts are recycled.
    const showChart = document.getElementById("chartContainer");
    while (showChart.firstChild) {
      showChart.firstChild.remove();
    }
    showChart.appendChild(chartDIV);

  }

});

Этот код D3.JS может быть широко разделен на блоки, как показано ниже.

  • Загрузить данные
  • Преобразовать данные
  • Создать выпадение со значениями
  • Создайте весы
  • Создать SVG
  • Добавить элементы диаграммы в SVG
  • Добавить SVG в диаграмму контейнера Div
  • Написать функции для рендеринга диаграмм для Загрузка а также Изменение События.

Большинство упомянутых выше шагов являются общими для диаграмм D3.JS. Итак, я не захожу в глубине каждого шага. Тем не менее, я хочу особенно выделить Загрузка а также Изменение События, связанные с этой диаграммой.

Когда диаграмма загружается, отображается диаграмма по умолчанию, т.е., стержни в алфавитном порядке.

document.addEventListener("DOMContentLoaded", myChart());

myChart () это функция, которая является шаблоном для рисования диаграммы.

Когда пользователь меняет выбор из выпадения, диаграммы на основе выбора отображаются. Это когда Изменение Событие начинается.

   d3.select("#selection").on("change", function() {
      const selectedOption = d3.select(this).node().value;
      if (selectedOption == "Ascendingly") {
        data.sort((a,b) => {
          return d3.ascending(a.frequency, b.frequency)
        }) 
      } else if (selectedOption == "Descendingly") {
        data.sort((a,b) => {
          return d3.descending(a.frequency, b.frequency)
        })
      } else if (selectedOption == "Alphabetically") {
        data.sort((a,b) => {
          return d3.ascending(a.letter, b.letter)
        })
      }
     myChart();
   })

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

Утилизация происходит в конце кода, где SVG вместе с элементами диаграммы изменяются в зависимости от выбора пользователя. Подобно Blackboard, где предыдущие ноты стираются, а свежие ноты составлены.

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

Не стесняйтесь обращаться ко мне, если у вас есть какие -либо вопросы.

Оригинал: “https://dev.to/learningmonk/sortable-bar-chart-with-d3-js-k3b”

Читайте ещё по теме: