d3.js实现创建完整柱形图的代码介绍

let barContainer = d3.select('.chart')

    .attr('width', data.length * barWidth + padding.left + padding.right)

    .attr('height', barHeight + padding.top + padding.bottom)

    .selectAll('g')

    .data(data).enter().append('g')

    .attr('transform', (d, i) => {

        return 'translate(' + (padding.left + i * barWidth) + ',' + (padding.top + barHeight - barScale(d)) + ')'

    });

barContainer.append('rect')

    .attr('height', d => barScale(d))

    .attr('width', barWidth - 1);

barContainer

    .append('text')

    .text(d => d)

    .attr('y', 10)

    .attr('x', barWidth / 2 - 5);

/**

 * 创造y轴

 */

let yAxis = d3.axisLeft(yAxisScale);

d3.select('.chart')

    .append('g')

    .attr('transform', 'translate(' + (padding.left - 10) + ',' + padding.top + ') ')

    .call(yAxis);

/**

 * 创建X轴

 */

let xAxis = d3.axisBottom(xAxisScale);

d3.select('.chart')

    .append('g')

    .attr('transform', 'translate(' + (padding.left) + ',' + (padding.top + barHeight) + ')')

    .call(xAxis);