Javascript d3.js覆盖图

我需要创建一个覆盖图。我不明白如何实现覆盖以及应该是什么样的数据。也许熟悉d3.js并具有构建覆盖图技能的人可以解释如何做到这一点

一个类似的例子：

overlayGraph.js

var OverlayGraph = (function() {

    return {

        // Initializing the module
        /*
            dataFile - the path to the json file
            selector - place of drawing chart

        */
        init: function(dataFile, selector) {
            d3.json(dataFile, data => {
                this.drawOverlayGraph(data, selector);
            });
        },

        // Draw out data
        drawOverlayGraph: (data, selector) => {
            // === BOILERPLATE ===
            var margin = { top: 20, right: 100, bottom: 30, left: 100 },
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            // === SVG Container === 
            var svg = d3.select(selector)
                        .append('svg')
                        .attr('width', width + margin.left + margin.right)
                        .attr('height', height + margin.top + margin.bottom)
                        .append('g')
                        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

            // === SCALE ===
            var xScale = d3.scale.linear()
                        .domain([0, d3.max(data, d => {
                            return +d.x;
                        })])
                        .range([0, width]);

            var yScale = d3.scale.linear()
                        .domain([0, d3.max(data, d => {
                            return +d.y;
                        })])
                        .range([height, 0]);

            // === AXES ===
            var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient('bottom')
                    .innerTickSize(-height)
                    .outerTickSize(0)
                    .tickPadding(10);

            var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient('left')
                    .innerTickSize(-width)
                    .outerTickSize(0)
                    .tickPadding(10);

            // === Drawing axes ===
            svg.append('g')
                .attr('class', 'x axis')
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            svg.append('g')
                .attr('class', 'y axis')
                .call(yAxis);

            // === VIZUALIZATION ===
            var line = d3.svg.line()
                .interpolate('basis')
                .x(d => {
                    return xScale(d.x);
                })
                .y(d => {
                    return yScale(d.y);
                });

            svg.append('path')
                .attr('d', line(data))
                .attr('class', 'line');
        }

    }

})();

OverlayGraph.init('data.json', 'body');

我的数据如下所示：

[
    { 
      "x": "0", 
      "y": "5" 
    },
    ...
]

关于

你想要的是一个区域 您必须找到一种方法来定义线的每个点在区域上的底值和顶值，然后执行

var area = d3.area()
    .x(function(d, i) { return x(d.data.date); })
    .y0(function(d) { return y(d.bottomValue); })
    .y1(function(d) { return y(d.topValue); });

   g.append("path")
      .datum(data)
      .attr("fill", "steelblue")
      .attr("d", area);

请参见

您想要的是一个区域 您必须找到一种方法来定义线的每个点在区域上的底值和顶值，然后执行

var area = d3.area()
    .x(function(d, i) { return x(d.data.date); })
    .y0(function(d) { return y(d.bottomValue); })
    .y1(function(d) { return y(d.topValue); });

   g.append("path")
      .datum(data)
      .attr("fill", "steelblue")
      .attr("d", area);

---

请参见

谢谢您的建议。我在json文件中添加了一些字段，并使用了您的解决方案。结果，结果证明这是必要的。再次感谢。谢谢你的建议。我在json文件中添加了一些字段，并使用了您的解决方案。结果，结果证明这是必要的。再次感谢。