D3.js 简单的正弦波（sin wave）

sin cos wave by d3.js

d3, chart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1566
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var width = 600,
  height = 300,
  margin = 50;

var svg = d3.select('#graph')
  .append('svg')
  .style({
    'width': width + 2 * margin,
    'height': height + 2 * margin
  });

var g = svg.append('g')
  .attr('transform', 'translate(' + margin + ', ' + margin + ')');

var sine = d3.range(0, 10).map(function(k) {
  var value = [0.5 * k * Math.PI, Math.sin(0.5 * k * Math.PI)];
  return value;
});

var xScale = d3.scale.linear()
  .range([0, width - margin])
  .domain(d3.extent(sine, function(d) {
    return d[0];
  }));

var yScale = d3.scale.linear()
  .range([height - margin, 0])
  .domain([-1, 1]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom');

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left');

var line = d3.svg.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  });

g.append('path')
  .datum(sine)
  .attr('d', line.interpolate('basis'))
  .attr({
    'stroke': 'black',
    'stroke-width': 1,
    fill: 'none'
  });

g.append('g')
  .classed('axis', true)
  .attr('transform', 'translate(0, ' + (height - margin) + ')')
  .call(xAxis);

g.append('g')
  .classed('axis', true)
  .call(yAxis);

编译

CSS

HTML

sin cos wave by d3.js

d3, chart

编辑器支持Emmet

快捷键

sin cos wave by d3.js

d3, chart

使用D3.js绘制类似MindManager或XMind软件所绘制的脑图

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：