如何使用d3.js制作可视化图表

如题所述

推荐答案 æ¨èäº2018-03-11

ããD3çç¹ç¹

ããæ¯æSVGï¼å¨Webé¡µé¢ä¸æ¸²ææ¯«æ ååã

ããåå°é¡¶é¨

ããD3çä½¿ç¨æ¹æ³

index.htmlä»£ç ï¼

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.y.axis path {
  display: none;
}

.y.axis line {
  stroke: #fff;
  stroke-opacity: .2;
  shape-rendering: crispEdges;
}

.y.axis .zero line {
  stroke: #000;
  stroke-opacity: 1;
}

.title {
  font: 300 78px Helvetica Neue;
  fill: #666;
}

.birthyear,
.age {
  text-anchor: middle;
}

.birthyear {
  fill: #fff;
}

rect {
  fill-opacity: .6;
  fill: #e377c2;
}

rect:first-child {
  fill: #1f77b4;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 40, bottom: 30, left: 20},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    barWidth = Math.floor(width / 19) - 1;

var x = d3.scale.linear()
    .range([barWidth / 2, width - barWidth / 2]);

var y = d3.scale.linear()
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickSize(-width)
    .tickFormat(function(d) { return Math.round(d / 1e6) + "M"; });

// An SVG element with a bottom-right origin.
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// A sliding container to hold the bars by birthyear.
var birthyears = svg.append("g")
    .attr("class", "birthyears");

// A label for the current year.
var title = svg.append("text")
    .attr("class", "title")
    .attr("dy", ".71em")
    .text(2000);

d3.csv("population.csv", function(error, data) {

  // Convert strings to numbers.
  data.forEach(function(d) {
    d.people = +d.people;
    d.year = +d.year;
    d.age = +d.age;
  });

  // Compute the extent of the data set in age and years.
  var age1 = d3.max(data, function(d) { return d.age; }),
      year0 = d3.min(data, function(d) { return d.year; }),
      year1 = d3.max(data, function(d) { return d.year; }),
      year = year1;

  // Update the scale domains.
  x.domain([year1 - age1, year1]);
  y.domain([0, d3.max(data, function(d) { return d.people; })]);

  // Produce a map from year and birthyear to [male, female].
  data = d3.nest()
      .key(function(d) { return d.year; })
      .key(function(d) { return d.year - d.age; })
      .rollup(function(v) { return v.map(function(d) { return d.people; }); })
      .map(data);

  // Add an axis to show the population values.
  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ",0)")
      .call(yAxis)
    .selectAll("g")
    .filter(function(value) { return !value; })
      .classed("zero", true);

  // Add labeled rects for each birthyear (so that no enter or exit is required).
  var birthyear = birthyears.selectAll(".birthyear")
      .data(d3.range(year0 - age1, year1 + 1, 5))
    .enter().append("g")
      .attr("class", "birthyear")
      .attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)"; });

  birthyear.selectAll("rect")
      .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
    .enter().append("rect")
      .attr("x", -barWidth / 2)
      .attr("width", barWidth)
      .attr("y", y)
      .attr("height", function(value) { return height - y(value); });

  // Add labels to show birthyear.
  birthyear.append("text")
      .attr("y", height - 4)
      .text(function(birthyear) { return birthyear; });

  // Add labels to show age (separate; not animated).
  svg.selectAll(".age")
      .data(d3.range(0, age1 + 1, 5))
    .enter().append("text")
      .attr("class", "age")
      .attr("x", function(age) { return x(year - age); })
      .attr("y", height + 4)
      .attr("dy", ".71em")
      .text(function(age) { return age; });

  // Allow the arrow keys to change the displayed year.
  window.focus();
  d3.select(window).on("keydown", function() {
    switch (d3.event.keyCode) {
      case 37: year = Math.max(year0, year - 10); break;
      case 39: year = Math.min(year1, year + 10); break;
    }
    update();
  });

  function update() {
    if (!(year in data)) return;
    title.text(year);

    birthyears.transition()
        .duration(750)
        .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)");

    birthyear.selectAll("rect")
        .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
      .transition()
        .duration(750)
        .attr("y", y)
        .attr("height", function(value) { return height - y(value); });
  }
});

温馨提示：答案为网友推荐，仅供参考

当前网址：http://00.wendadaohang.com/zd/DreTnTDDnBreBDrBeDI.html

其他回答

第1个回答 2019-07-30

d3的力引导图可以看看他这个。网页链接

第2个回答 2017-08-22

哥们，d3.js的中文书还是有基本的，随便卖本看看吧，这个是知道上几百字能说清楚并教会你的么？

第3个回答 2017-06-22

如何使用d3.js制作可视化图表 ? 百度去!

相似回答

尼达维(一款优秀的开源数据可视化工具)答：1.引入尼达维的js和css文件在使用尼达维之前，需要先引入尼达维的js和css文件。可以通过以下方式引入：```2.创建图表容器在页面中创建一个div元素，作为图表的容器。例如：```3.初始化图表在页面加载完成后，需要初始化图表。例如：```nv.addGraph(function(){ varchart=nv.models.lineChart();ch...

初识D3.js :打造专属可视化答：D3-selection (选择集) 是 D3js的核心模块,主要是用来进行选择元素,设置属性、数据绑定,事件绑定等操作。选择元素: D3-selection 提供了两种方法来获取目标元素,d3.select():返回目标元素的第一个节点,d3.selectAll():返回目标元素的集合,乍一看有点类似原生API 的 querySelector 和 querySelectorAll,但是 ...

d3js的tree结构图例怎么做答：如下过程：使用d3.js 初始化d3和画布大小，tree = d3.layout.cluster().size([h, w])导入数据，使用d3默认处理数据： root = tree.nodes(data)处理数据（包括坐标的处理）展示数据思路是这样的。

如何使用D3创建力导向图答：第一步：安装D3首先，你需要到D3的官方网站（https://d3js.org/）下载最新版本的D3。下载完成后，将它解压缩到你的工程目录下。第二步：准备数据力导向图需要一个数据集来告诉它要展示哪些关系。这个数据集必须是一个JSON格式的数据文件。通常，一个力导向图的数据集包含两个部分：节点和连接。节...

大家正在搜

excel可视化图表制作可视化图表怎么做可视化图表工具 excel可视化图表做可视化图表的软件项目进度可视化图表 excel可视化图表模板诉讼可视化图表可视化表格