D3图表不显示浏览器答案

【问题标题】：D3 chart not showing browserD3图表不显示浏览器
【发布时间】：2020-11-28 12:38:15
【问题描述】：

我已经下载了这个可视化：https://vizhub.com/Mithunprom/6f378ad23e3e4a2f99949368f02e3290

如果您访问该链接，您将能够看到所有源文件，包括它们的代码。

我无法在浏览器中通过 index.html 运行它，浏览器中什么也没有显示。我只是想让它工作。

这是 index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Making a Bar Chart</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script src="bundle.js"></script>
  </body>
</html>

【问题讨论】：

标签： d3.js

【解决方案1】：

您需要从指定的 URL 添加脚本部分和 css 代码。我还进行了完成任务所需的更改。

请在下面找到工作示例：

const data = [{
    country: 'China',
    population: 1415046
  },
  {
    country: 'India',
    population: 1354052
  },
  {
    country: 'United States',
    population: 326767
  },
  {
    country: 'Indonesia',
    population: 266795
  },
  {
    country: 'Brazil',
    population: 210868
  },
  {
    country: 'Pakistan',
    population: 200814
  },
  {
    country: 'Nigeria',
    population: 195875
  },
  {
    country: 'Bangladesh',
    population: 166368
  },
  {
    country: 'Russia',
    population: 143965
  },
  {
    country: 'Mexico',
    population: 130759
  },
];

data.forEach(d => {
  d.population = +d.population * 1000;
});

const titleText = 'Top 10 Most Populous Countries';
const xAxisLabelText = 'Population';

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

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

const render = data => {
  const xValue = d => d['population'];
  const yValue = d => d.country;
  const margin = {
    top: 50,
    right: 40,
    bottom: 77,
    left: 180
  };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

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

  const yScale = d3.scaleBand()
    .domain(data.map(yValue))
    .range([0, innerHeight])
    .padding(0.1);

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

  const xAxisTickFormat = number =>
    d3.format('.3s')(number)
    .replace('G', 'B');

  const xAxis = d3.axisBottom(xScale)
    .tickFormat(xAxisTickFormat)
    .tickSize(-innerHeight);

  g.append('g')
    .call(d3.axisLeft(yScale))
    .selectAll('.domain, .tick line')
    .remove();

  const xAxisG = g.append('g').call(xAxis)
    .attr('transform', `translate(0,${innerHeight})`);

  xAxisG.select('.domain').remove();

  xAxisG.append('text')
    .attr('class', 'axis-label')
    .attr('y', 65)
    .attr('x', innerWidth / 2)
    .attr('fill', 'black')
    .text(xAxisLabelText);

  g.selectAll('rect').data(data)
    .enter().append('rect')
    .attr('y', d => yScale(yValue(d)))
    .attr('width', d => xScale(xValue(d)))
    .attr('height', yScale.bandwidth());

  g.append('text')
    .attr('class', 'title')
    .attr('y', -10)
    .text(titleText);
};

render(data);

body {
  margin: 0px;
  overflow: hidden;
}

rect {
  fill: steelblue;
}

<!DOCTYPE html>
<html>

<head>
  <title>Making a Bar Chart</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
</head>

<body>
  <svg width="960" height="500"></svg>
  <script src="bundle.js"></script>
</body>

</html>

【讨论】：

感谢您的快速回复:)