D3线图显示为面积图

Question

我绘制了一个折线图，该线下的区域看起来是彩色的，使其看起来像一个区域图。 代码如下所示

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    body {
    font: 12px Arial;
    }

    path {
    stroke-width: 1;

    stroke : 1;
    }

    .axis path,.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
   } 
   </style>
   <script type="text/javascript" src="d3.min.js"></script>
   <script type="text/javascript" src="jquery-1.8.0.js"></script>
   <meta charset="ISO-8859-1">
   <title>Insert title here</title>
   </head>
   <body>
   <script type="text/javascript">
   var baseSvg = d3.select("body")
                .append("svg")
                .attr("height",800)
                .attr("width",800)
                .append("g")
                .attr("transform","translate(50,50)");


    $.ajax({
    method : 'GET',
    url:"URL", //Called my URL here
    success:function(data){
        var res = data.d.results;
        /* res.forEach(function(d){
            console.log(new Date(parseInt(d.DATE_SQL.substring(6))));
        }) */
        buildTrend(res);

    }       

    }) ;

    function buildTrend(res) {
    var x = d3.time.scale().range([ 50, 700 ]);
    var y = d3.scale.linear().range([ 500, 0 ]);
    res.forEach(function(d){
        d.DATE_SQL = new Date(parseInt(d.DATE_SQL.substring(6)));       
    });
    var line =  d3.svg.line().interpolate("basis").x(function(d) {
        return x(d.DATE_SQL)
    }).y(function(d) {
        return y(d.M_COUNT)
    }); 
    x.domain(d3.extent(res, function(d) {
        return d.DATE_SQL;
    }));
    y.domain([0,d3.max(res, function(d) {
        return d.M_COUNT;
    })]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(15);

    baseSvg.append("g")
           .attr("class", "x axis").attr("transform",
                    "translate(0," + 500 + ")").call(xAxis)
                    .selectAll("text").attr("transform",function(d){ return "rotate(-90)"})
                    .attr("dx", "-.8em").attr("dy", ".15em").style("text-anchor", "end");

    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(8); 

     baseSvg.append("g")
    .attr("transform","translate(50,0)")// Add the Y Axis
    .attr("class", "y axis").call(yAxis);

     baseSvg.append("g")
            .attr("transform","translate(0,10)")
            .append("path")
            .attr("d",line(res))
            .attr("stroke","blue");
    }


    </script>
    </body>
    </html>

但结果看起来像这样

我检查了所有代码，搜索“黑色”，以找出颜色的可能原因，我没有找到任何。 也许它是默认颜色。 无法弄清楚这个的原因。

谢谢，维拉

Answer 1

尝试将此css添加到您的行：

path line {
  fill: none;
  stroke: #000;
}

我过去曾经发生过这种情况，如果我没记错的话，d3会认为线上的第一个点和最后一个点是连接的，因此将它作为一个区域并默认用颜色填充它黑色。

如果将填充设置为无并添加笔划，则应解决此问题。

希望这可以帮助。

D3线图显示为面积图

问题描述

1 个解决方案

解决方案1
10 已采纳 2014-07-09 05:24:13

D3线图显示为面积图

问题描述

1 个解决方案

解决方案1 10 已采纳 2014-07-09 05:24:13

解决方案1
10 已采纳 2014-07-09 05:24:13