D3js基础课07：条形图

现在，如果我们要在SVG中手动创建条形图。我们会这样做：

<svg>
  <rect x="0" y="0"  width="120" height="25"/>
  <rect x="0" y="30" width="140" height="25"/>
  <rect x="0" y="60" width="150" height="25"/>
  <rect x="0" y="90" width="180" height="25"/>
</svg>

用 D3 创建条形图

让我们用 D3 来做同样的事情

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view010701"></div>
<script>
    data = [120, 140, 150, 180, 200]  // define width is array
    svg = d3.select('#view010701')
        .append('svg');
    chart = svg.selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)
</script>

添加文字

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view010702"></div>
<script>
    data = [120, 140, 150, 180]  // define width is array
    svg = d3.select('#view010702')
        .append('svg');
    chart = svg.selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)

    // After creating basic barchart
    svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d) {return d})
        .attr("y", function(d,i) {return i*30 + 20})
        .attr("x", function(d) {return d})
</script>

把文字放在条形图内部

我们把图表弄得漂亮一点好吗？通过，只是改变位置，颜色，文字大小！

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view010703"></div>
<script>
    data = [120, 140, 150, 180]  // define width is array
    svg = d3.select('#view010703')
        .append('svg');
    chart = svg.selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)

    // After creating basic barchart
    svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d) {return d})
        .attr("y", function(d,i) {return i*30 + 15})
        .attr("x", function(d) {return d - 20})
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .attr("fill", "white")
</script>

课后作业

修改前面的代码，修改条形图的颜色，还有将条形图改变方向。

关于代码运行效果

由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。