D3.js 入门

根据 D3.js API 入门 画一个简单的柱状图

1. 创建图表 【 d3-selection 】

 let chart = d3.select( ".chart" );

2. 计算x,y轴 【d3-scale 】
   x轴 使用 分段比例尺 【 d3.scaleBand 】 x
   y轴 使用 线性比例尺 【 d3.scaleLinear 】 y

3. 为图表创建两个子元素 【 标题， 正图 】

let title = chart.append('g')// 输出标题
          .attr('class', 'title')
          .append('text')
          .attr('x', containerWidth / 2)
          .attr('y', 20)
          .text('aaa');   
let g = chart.append("g"); // 正图

4. 创建tootip 【 d3Tip 】

  let tip = d3Tip() // 设置tip
          .attr('class', 'd3-tip')
          .html(function (d) {
              return "xxxx";
          });
  chart.call(tip);

5. 为正图 添加元素 【 x、y轴，柱状体，每列的值 】

    g.append("g") // 设置x轴
        .attr("transform", "translate(0, 10)")
        .call(d3.axisBottom(x));

    g.append("g")// 设置y轴
        .call(d3.axisLeft(y).ticks(10, 'ms'))  // 分成10份，给出单位
        .append("text")
        .attr("y", -16)
        .text("y轴标题");


    g.selectAll(".bar")   // 所有柱体
        .data(data)
        .enter()   // 当不存在该dom时 自动根据data创建
        .append("rect")
        .on('mouseover', tip.show)   // 使用第4步创建好的tooltip 绑定事件
        .on('mouseout', tip.hide)
        .attr("fill", "#8a2be2")   // 柱体 填充颜色
        .attr("x", function (d) { return x(d.x); })    // 取出data 中每个x 所对应的 x轴起始值
        .attr("y", height)                                           // 柱体在y轴方向的起始值
        .attr("width", x.bandwidth())                        // 取出x轴的每段宽度 （分段比例尺）
        .attr("height", 0)                                          // 初始化柱体的高度为0
        .attr("y", function (d) { return y(d.y); })          // 取出data中每个y所对应的 y轴起始值
        .attr("height", function (d) { return height - y(d.y); });      //  计算柱体高度

    g.append('g')    //  图上的值
        .selectAll('text')
        .data(data)
        .enter()
        .append('text')
        .attr('text-anchor', 'middle')
        .attr('x', function (d, i) { return x(d.x); })
        .attr('y', function (d) { return y(d.y); })
        .attr('dx', barWidth / 2)
        .text(function (d) { return (d.y * 100).toFixed(2) + 'ms'; })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);            

源码 暂未上传