Tech&W_srdc_webplatform_DataVisualization

2020-04-17

bootstrap-table

reference: http://www.itxst.com/Bootstrap-Table/QuickStart.html

record:

2020-05-08

因为在组织一个组合表头时，产生如下错误，表格无法渲染

实则是因为在构建table的columns 时，要将同一层的列放在同一个组 [ ]

D3.js

scenario:

使用 D3 在前端进行一个 pie 数据的绘制。两个技术点

D3 select("xxx") 默认时抓取 class name, 如果是 id, 则需要加 # select("#xxx")
svg 是需要在 html 中标注

后续需要调整布局及改进。

感谢： https://blog.csdn.net/qq_34414916/article/details/80036301

2020-04-20

JS 构建 HTML

使用 D3 可视化一下数据文件的组成结构

1. 解析数据文件失败的数量

2. 解析数据文件成功属于正常case (有生产数据）的数量

3. 解析数据文件成功但是数据error (无生产数据）的数量

下列形式为备选图示：额外的折现标注, 需保留数量。

参考《D3数据可视化实战手册》 Pie 部分, 注意理解下 arc 的构成。

pieChart:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pie Chart</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    function pieChart() {
        var _chart = {};

        var _width = 500, _height = 500,
                _data = [],
                _colors = d3.scaleOrdinal(d3.schemeCategory10),
                _svg,
                _bodyG,
                _pieG,
                _radius = 200,
                _innerRadius = 100,
                _duration = 1000;

        _chart.render = function () {
            if (!_svg) {
                _svg = d3.select("body").append("svg")
                        .attr("height", _height)
                        .attr("width", _width);
            }

            renderBody(_svg);
        };

        function renderBody(svg) {
            if (!_bodyG)
                _bodyG = svg.append("g")
                        .attr("class", "body");

            renderPie();
        }

        function renderPie() {
            var pie = d3.pie() // <-A
                    .sort(function (d) {
                        return d.id;
                    })
                    .value(function (d) {
                        return d.value;
                    });

            var arc = d3.arc()
                    .outerRadius(_radius)
                    .innerRadius(_innerRadius);

            if (!_pieG)
                _pieG = _bodyG.append("g")
                        .attr("class", "pie")
                        .attr("transform", "translate(" 
                            + _radius 
                            + "," 
                            + _radius + ")");

            renderSlices(pie, arc);

            renderLabels(pie, arc);
        }

        function renderSlices(pie, arc) {
            var slices = _pieG.selectAll("path.arc")
                    .data(pie(_data)); // <-B

            slices.enter()
                    .append("path")
                .merge(slices)
                    .attr("class", "arc")
                    .attr("fill", function (d, i) {
                        return _colors(i);
                    })
                .transition()
                    .duration(_duration)
                    .attrTween("d", function (d) {
                        var currentArc = this.__current__; // <-C

                        if (!currentArc)
                            currentArc = {startAngle: 0,
                                            endAngle: 0};

                        var interpolate = d3.interpolate(
                                            currentArc, d);

                        this.__current__ = interpolate(1);//<-D

                        return function (t) {
                            return arc(interpolate(t));
                        };
                    });
        }

        function renderLabels(pie, arc) {
            var labels = _pieG.selectAll("text.label")
                    .data(pie(_data)); // <-E

            labels.enter()
                    .append("text")
                .merge(labels)
                    .attr("class", "label")
                .transition()
                    .duration(_duration)
                    .attr("transform", function (d) {
                        return "translate("
                            + arc.centroid(d) + ")"; // <-F
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(function (d) {
                        return d.data.id;
                    });
        }

        _chart.width = function (w) {
            if (!arguments.length) return _width;
            _width = w;
            return _chart;
        };

        _chart.height = function (h) {
            if (!arguments.length) return _height;
            _height = h;
            return _chart;
        };

        _chart.colors = function (c) {
            if (!arguments.length) return _colors;
            _colors = c;
            return _chart;
        };

        _chart.radius = function (r) {
            if (!arguments.length) return _radius;
            _radius = r;
            return _chart;
        };

        _chart.innerRadius = function (r) {
            if (!arguments.length) return _innerRadius;
            _innerRadius = r;
            return _chart;
        };

        _chart.data = function (d) {
            if (!arguments.length) return _data;
            _data = d;
            return _chart;
        };

        return _chart;
    }

    function randomData() {
        return Math.random() * 9 + 1;
    }

    function update() {
        for (var j = 0; j < data.length; ++j)
            data[j].value = randomData();

        chart.render();
    }

    var numberOfDataPoint = 6,
            data = [];

    data = d3.range(numberOfDataPoint).map(function (i) {
        return {id: i, value: randomData()};
    });

    var chart = pieChart()
            .radius(200)
            .innerRadius(100)
            .data(data);

    chart.render();
</script>

<div class="control-group">
    <button onclick="update()">Update</button>
</div>

</body>

</html>

View Code

arc:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Arc</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var width = 400,
        height = 400,
        fullAngle = 2 * Math.PI, // <-A
        colors =  d3.scaleOrdinal(d3.schemeCategory20c);

    var svg = d3.select("body").append("svg")
                .attr("class", "pie")
                .attr("height", height)
                .attr("width", width);

    function render(innerRadius, endAngle){
        if(!endAngle) endAngle = fullAngle;

        var data = [ // <-B
            {startAngle: 0, endAngle: 0.1 * endAngle},
            {startAngle: 0.1 * endAngle, endAngle: 0.2 * endAngle},
            {startAngle: 0.2 * endAngle, endAngle: 0.4 * endAngle},
            {startAngle: 0.4 * endAngle, endAngle: 0.6 * endAngle},
            {startAngle: 0.6 * endAngle, endAngle: 0.7 * endAngle},
            {startAngle: 0.7 * endAngle, endAngle: 0.9 * endAngle},
            {startAngle: 0.9 * endAngle, endAngle: endAngle}
        ];

        var arc = d3.arc().outerRadius(200) // <-C
                        .innerRadius(innerRadius);

        svg.select("g").remove();

        svg.append("g")
                .attr("transform", "translate(200,200)")
        .selectAll("path.arc")
                .data(data)
            .enter()
                .append("path")
                    .attr("class", "arc")
                    .attr("fill", function(d, i){return colors(i);})
                    .attr("d", function(d, i){
                        return arc(d, i); // <-D
                    });
    }

    render(0);
</script>

<div class="control-group">
    <button onclick="render(0)">Circle</button>
    <button onclick="render(100)">Annulus(Donut)</button>
    <button onclick="render(0, Math.PI)">Circular Sector</button>
    <button onclick="render(100, Math.PI)">Annulus Sector</button>
</div>

</body>

</html>

View Code

posted @ 2020-04-17 23:24 君子之行阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

君子之行

夫君子之行，静以修身，俭以养德。非澹泊无以明志，非宁静无以致远。

Tech&W_srdc_webplatform_DataVisualization

bootstrap-table

D3.js