D3, VueJS, оси графика не отображаются

Question

Я пытаюсь добавить гистограмму D3 к компоненту VueJS, но не могу правильно отобразить оси. Единственное, что я вижу на рендере, - это вершина оси Y.

вот мой js для компонента диаграммы:

export default {
  name: "Histogram",
  props: {
  },
  mounted() {
    this.generateBars();
  },
  data: () => ({
    title: 'Bar Chart'
  }),
  methods: {
    generateBars() {
      const sample = [
      {
        language: 'Rust',
        value: 78.9,
        color: '#000000'
      },

      ...

      {
        language: 'Clojure',
        value: 59.6,
        color: '#507dca'
      }
    ];
      const margin = 60
      const width = 1000 - 2 * margin;
      const height = 600 - 2 * margin;

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

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

      const yScale = d3.scaleLinear()
        .range([height, 0])
        .domain([0, 100]);
      
      chart.append('g')
        .call(d3.axisLeft(yScale));

      const xScale = d3.scaleBand()
        .range([0, width])
        .domain(this.sample.map((s) => s.language))
        .padding(0.2)
      
      chart.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(xScale));
      
    }
  }
};

Мой шаблон для компонента - это просто диаграмма сам:

<template>
  <div id="container" class="svg-container" align="center">
    <h3>{{ title }}</h3>
    <svg />
  </div>
</template>

Вот что вижу: введите описание изображения здесь

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

Answer 1

Похоже, вы забыли установить ширину и высоту для svg (через html или js).

<svg width="1000" height="600"></svg>

И удалите «это» в строке:

.domain(this.sample.map((s) => s.language))