前端d3库 写个demo

好的，我可以为您提供一个基于d3.js库的简单demo。这个demo将创建一个简单的柱状图，用于展示不同城市的人口数量。

首先，您需要在HTML文件中引入d3.js库。您可以从官方网站（https://d3js.org/）上下载最新版本的d3.js文件，然后将其保存在您的项目文件夹中。在HTML文件中，您可以使用以下代码来引入d3.js文件：

<script src="path/to/d3.js"></script>

接下来，您可以使用以下代码来创建一个容器元素，用于容纳柱状图：

<div id="chart"></div>

然后，您可以使用以下JavaScript代码来生成柱状图：

// 定义数据
var data = [
  {city: "北京", population: 2154},
  {city: "上海", population: 2424},
  {city: "广州", population: 1478},
  {city: "深圳", population: 1303},
  {city: "成都", population: 1630}
];

// 定义画布大小
var width = 600;
var height = 400;

// 定义柱状图的x轴比例尺
var x = d3.scaleBand()
  .domain(data.map(function(d) { return d.city; }))
  .range([0, width])
  .padding(0.1);

// 定义柱状图的y轴比例尺
var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.population; })])
  .range([height, 0]);

// 创建SVG元素
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 添加柱子
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.city); })
  .attr("y", function(d) { return y(d.population); })
  .attr("width", x.bandwidth())
  .attr("height", function(d) { return height - y(d.population); });

// 添加x轴
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// 添加y轴
svg.append("g")
  .call(d3.axisLeft(y));

以上代码将生成一个简单的柱状图，展示了不同城市的人口数量。您可以根据自己的需求修改数据和样式，以适应您的项目。