200204.md

d3 画柱状图

需要的元素

1. svg: 画布
2. rect：柱状图
3. text：柱状图名称渲染

值得注意的

1. 柱状图的两大元素，柱状图和各个柱状图名称。
2. 各个柱状图 y 轴的位置需要计算，计算公式可以是：svg 画布总高 - 柱状图高 - svg 的padding
3. 各个柱状图 x 轴的位置也需要计算，计算公式可以是：svg 的padding + 当前柱状图的序列号 * （柱状图的宽 + 柱状图之间的 margin 值）
4. 柱状图的名字同理，x,y轴位置需要计算

源码

function drawBar(svgEle, option, arr) {
    // svgEle 为父节点 svg 元素
    // option 为样式设置选项
    // arr 为需要渲染的数据

    // 渲染柱状图
    let type = "rect";
    let updateBar = svgEle.selectAll(type).data(arr);
    console.log(updateBar);
    updateBar.attr("width", option.barW).attr("height", val => {
        return val.value;
    }).attr("fill", "red")
    .attr("x", (val, i) => {
        return 20 + i * option.barPlace;
    }).attr("y", val => {
        return 500 - val.value - 20;
    });
    // 数据大于元素节点
    let enterBar = updateBar.enter();
    // 处理数据大于元素时的情况
    enterBar.append(type)
    .attr("width", option.barW).attr("height", val => {
        return val.value;
    }).attr("fill", "red")
    .attr("x", (val, i) => {
        return 20 + i * option.barPlace;
    }).attr("y", val => {
        return 500 - val.value - 20;
    });
    // 元素节点大于数据
    let exitBar = updateBar.exit();
    exitBar.remove();

    // 渲染柱状图名字
    let updateTxt = svgEle.selectAll("text").data(arr);
    updateTxt.attr("x", (val, i) => {
        return 20 + i * option.barPlace + option.barW / 2;
    }).attr("y", val => {
        return 500 - val.value - 20;
    }).text(data => {
        return data.name;
    }).attr("text-anchor", "middle").attr("fill", "#080");
    let enterTxt = updateTxt.enter();
    enterTxt.append("text")
    .attr("x", (val, i) => {
        return 20 + i * option.barPlace + option.barW / 2;
    }).attr("y", val => {
        return 500 - val.value - 20;
    }).text(data => {
        return data.name;
    }).attr("text-anchor", "middle").attr("fill", "#080");
    let exitTxt = updateTxt.exit();
    exitTxt.remove();
}

详解

找到已经渲染数据的节点，进行更新，当第一次渲染时，这个数组为0，需要增加节点渲染

let updateBar = svgEle.selectAll(type).data(arr);

找到没有渲染数据，增加节点进行渲染，但第二次渲染且数据没有增加时，此时找到已经渲染数据的节点，进行更新。

let enterBar = updateBar.enter();

找到没有数据渲染的节点，删掉

let exitTxt = updateTxt.exit();
exitTxt.remove();

demo

d3 操作 svg 画柱状图