Question

我可能是谷歌搜索错误，但我想知道是否可以在线下创建背景（图像或颜色）。我想创建一些如下图所示的内容。

我创建了一个图表，看起来像这样的示例数据：

但这就是我想象它的样子（不介意颜色）。

 var svg,lineGen;

    makeChart();
    function makeChart(){
    // example data
    mobileData = [
    { "uur" : "00", "pageviews":"20"},
    { "uur" : "01", "pageviews":"26"},
    { "uur" : "02", "pageviews":"10"},
    { "uur" : "03", "pageviews":"30"},
    { "uur" : "04", "pageviews":"40"},
    { "uur" : "05", "pageviews":"50"},
    ]

    tabletData = [
    { "uur" : "00", "pageviews":"50"},
    { "uur" : "01", "pageviews":"20"},
    { "uur" : "02", "pageviews":"10"},
    { "uur" : "03", "pageviews":"35"},
    { "uur" : "04", "pageviews":"45"},
    { "uur" : "05", "pageviews":"10"},
    ]

        var WIDTH = 1200,
            HEIGHT = 200,
            MARGINS = {
                    top:20,
                right:20,
                bottom:20,
                left:50
            }
         svg = d3.select("#visualisation"),
            WIDTH = 1200,
            HEIGHT = 200,
            MARGINS = {
                top: 20,
                right: 20,
                bottom: 20,
                left: 50
            },
            xScale = d3.scale.linear().range([MARGINS.left,WIDTH-MARGINS.right]).domain([00,23]),

            yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,50]),

            xAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(24)

            yAxis = d3.svg.axis()
                .scale(yScale)
                .ticks(10)
                .tickPadding(20)
                .orient("left");

        svg.append("svg:g")
            .attr("class","axis")
            .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
            .call(xAxis);

        svg.append("svg:g")
            .attr("class","axis axis-y")
            .attr("transform", "translate(" + (MARGINS.left) + ",0)")
            .call(yAxis);

         lineGen = d3.svg.line()
            .x(function(d){
                return xScale(d.uur);
            })
            .y(function(d){
                return yScale(d.pageviews);
            });

        svg.append('svg:path')
            .attr('d', lineGen(mobileData))
            .attr('stroke','orange')
            .attr('stroke-width',2)
            .attr('fill','none');

        svg.append('svg:path')
            .attr('d', lineGen(tabletData))
            .attr('stroke','deeppink')
            .attr('stroke-width',2)
            .attr('fill','none');
    }

Answer 1

您可以使用area执行此操作。只需添加以下代码：

var area = d3.svg.area()
  .x(function(d) { return xScale(d.uur); })
  .y(function(d) { return yScale(d.pageviews); })
  .y1(function(d) { return HEIGHT - MARGINS.bottom });

 svg.append("path")
  .attr("fill", "yellow")
  .attr("d", area(mobileData));

我分道扬琴，check it in action。

D3JS背景线图

1 个答案: