d3 - 简单柱状图实现

实现简单柱状图

<div class="myddd"></div>

    var data = [10, 5, 12, 15];

    var width = 300

    const scaleFactor = 10;

    const barHeight = 30;

    var graph = d3.select(".myddd")

      .append("svg")

      .attr("width", width)

      .attr("height", barHeight * data.length);

    // bar的每个rect设置向下平移

    var bar = graph.selectAll("g")

      .data(data)

      .enter()

      .append("g")

      .attr("transform", function(d, i) {

        return "translate(0," + i * barHeight + ")";

      });

    // 设置rect的宽高和填充色

    bar.append("rect").attr("width", function(d) {

      return d * scaleFactor;

    })

    .attr("height", barHeight - 5)

    .attr("fill", 'cyan');

    // 增加文本显示、设置文本位置

    bar.append("text")

      .attr("x", function(d) { return (d*scaleFactor + 3); })

      .attr("y", barHeight/2-3)

      .attr("dy", ".35em")

      .text(function(d) { return d; });