html D3byEX 6.3：网格线（适应D3.js v4）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html D3byEX 6.3：网格线（适应D3.js v4）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <meta charset=utf-8>
<head>
    <meta name="description" content="D3.js v4, .csv, .map, .scaleLinear,
                                     .axisLeft, .axisBottom, scatter plot
                                     with gridlines" />
</head>
<body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <script>
        var url = "https://gist.githubusercontent.com/d3byex/520e6dcb30e673c149cc/raw/432623f00f6740021bdc13141612ac0b6196b022/corr_aapl_msft.csv";
        d3.csv(url, function (error, rawData) {
            var data = rawData.map(function (d) {
                return { X: +d.AAPL, Y: +d.MSFT } // Apple, Microsoft
            });

            var xExtents = d3.extent(data, function (d) { return d.X; });
            var yExtents = d3.extent(data, function (d) { return d.Y; });

            var maxExtent = d3.max(
              xExtents.concat(yExtents), function (d) { return Math.abs(d); });

            var graphWidth = 400, graphHeight = 400;
            var radius = 5;
            var margins = { left: 50, top: 50, right: 50, bottom: 50 };
            var axisPadding = 3;

            var totalHeight = graphHeight + margins.top + margins.bottom;
            var totalWidth = graphWidth + margins.left + margins.right;

            var scale = d3.scaleLinear()
                          .domain([-maxExtent, maxExtent])
                          .range([0, graphWidth]);

            var svg = d3.select('body')
                        .append('svg')
                        .attrs({width: totalWidth, height: totalHeight});

            var yGridlinesAxis = d3.axisLeft()
                                   .scale(scale);
            var yGridlineNodes = svg.append('g')
                                    .attr('transform',
          'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')')
                                    .call(yGridlinesAxis
                     .tickSize(graphWidth + axisPadding, 0, 0).tickFormat(""));
            styleGridlineNodes(yGridlineNodes);

            var xGridlinesAxis = d3.axisBottom()
                                   .scale(scale);
            var xGridlineNodes = svg.append('g')
                                    .attr('transform',
'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
.call(xGridlinesAxis.tickSize(-graphWidth - axisPadding, 0, 0).tickFormat(""));
            styleGridlineNodes(xGridlineNodes);

            var xAxis = d3.axisBottom().scale(scale);
            var yAxis = d3.axisLeft().scale(scale);

            var yAxisNodes = svg.append('g')
                                .attr('transform',
         'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')')
                                .call(yAxis);//.attr("class", "x axis");
            styleAxisNodes(yAxisNodes);

            var xAxisNodes = svg.append('g')
                                .attr('transform',
'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
                                .call(xAxis);
            styleAxisNodes(xAxisNodes);

            var graphGroup = svg.append('g')
                                .attr('transform',
                        'translate(' + margins.left + ',' + margins.top + ')');

            graphGroup.selectAll('circle')
                      .data(data)
                      .enter()
                      .append('circle')
                      .attrs({cx: function (d) { return scale(d.X); },
                              cy: function (d) { return scale(d.Y); },
                              r: radius, fill: 'none', stroke: 'steelblue'});
        }); // d3.csv

        // gridlines
        function styleGridlineNodes(axisNodes) {
                 axisNodes.selectAll('.domain')
                          .attrs({fill: 'none', stroke: 'none' });
                 axisNodes.selectAll('.tick line')
                          .attrs({fill: 'none', 'stroke-width': 1,
                                  stroke: 'lightgray'});
        }

        // ticks
        function styleAxisNodes(axisNodes) {
                 axisNodes.selectAll('.domain')
                          .attrs({fill: 'none', 'stroke-width': 1,
                                  stroke: 'black'});
                 axisNodes.selectAll('.tick line')
                          .attrs({fill: 'none', 'stroke-width': 1,
                                  stroke: 'black'});
        }
    </script>
</body>
</html>

以上是关于html D3byEX 6.3：网格线（适应D3.js v4）的主要内容，如果未能解决你的问题，请参考以下文章

html D3byEX：4.7：右轴（适应D3.js v4）

html D3byEX 9.9：环形图（适应D3.js v4）

html D3byEX 7.3：延迟转换（适应D3.js v4）

html D3byEX 7.1：动画颜色（适应D3.js v4）

html D3byEX 6.4：气泡图（适应D3.js v4）

html D3byEX 5.8：范围频带（适应D3.js v4）