01-入门篇

话不多说先上案例

使用在线的D3.js

<script src="https://d3js.org/d3.v5.min.js"></script>

用数据驱动，绘制一个柱状图

<body>
    <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
    <script>
        const data = [{name: 'Shao', value: 6}, {name: 'Wen', value: 6},
            {name: 'Cai', value: 16}, {name: 'Liang', value: 14},
            {name: 'Yuan', value: 6}, {name: 'Rui', value: 10},
            {name: 'Dong', value: 13}, {name: 'He', value: 20},
            {name: 'Xiang', value: 12}, {name: 'Godness', value: 11},
            {name: 'Wei', value: 15}, {name: 'Chen', value: 14},
            {name: 'Yu', value: 15}, {name: 'Li', value: 18}, ];

        // data1在更换数据的时候使用
        const data1 = [{name: 'Tian', value: 11}, {name: 'Wen', value: 13},
            {name: 'Cai', value: 16}, {name: 'Gou', value: 14},
            {name: 'Zha', value: 14}, {name: 'Rui', value: 10},
            {name: 'Dong', value: 13}, {name: 'He', value: 20},
            {name: 'Xiang', value: 8}, {name: 'Godness', value: 11},
            {name: 'Wei', value: 15}, {name: 'Chen', value: 14},
            {name: 'Yu', value: 15}, {name: 'Li', value: 18}, ];

        const svg = d3.select('#mainsvg');

        const widht = +svg.attr('width'); // 获取一个参数的属性'+'
        const height = +svg.attr('height');
        const margin = {top: 60, right: 30, bottom: 60, left: 50};
        const innerWidth = widht - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;

        // 横轴比例尺
        const xScale = d3.scaleLinear()
            .domain([0, d3.max(data, d => d.value)])
            .range([0, innerWidth]);

        const yScale = d3.scaleBand()
            .domain( data.map( d => d.name) ) // 离散的坐标系
            .range([0, innerHeight])
            .padding(0.2);

        // 定义坐标轴的组
        const g = svg.append('g').attr('id', 'maingroup')
            .attr('transform', 'translate(100, 50)');

        const yAxis = d3.axisLeft(yScale);
        g.append('g').call(yAxis);

        const xAxis = d3.axisBottom(xScale);
        g.append('g').call(xAxis).attr('transform', 'translate(0, '+innerHeight+')');

        // 数据驱动
        data.forEach( d => {
            g.append('rect')
                .attr('width', xScale(d.value))
                .attr('height', yScale.bandwidth())
                .attr('fill', 'green')
                .attr('y', yScale(d.name))
        });

        // 选择器 调节每一个刻度
        d3.selectAll('.tick text').attr('font-size', '2em');

        // 添加标题
        g.append('text').text('title')
            .attr('font-size', '3em')
            .attr('transform', 'translate('+innerWidth / 2+', 0)')
            .attr('text-anchor', 'middle');

    </script>
</body>

以上代码的效果图

更新数据的代码

d3.selectAll('rect').data(data1).attr('width', d => xScale(d.value));

效果图如下

使用data1绘制图表

最后编辑于：2020.08.20 20:55:25