D3线图显示为面积图

Question

I have drawn a line graph and area under the line is appears to be colored to make it appear like a area graph. 我绘制了一个折线图，该线下的区域看起来是彩色的，使其看起来像一个区域图。 The code is shown below 代码如下所示

    <!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>

However the result looks like this 但结果看起来像这样

I have checked all my code to search "Black" to identify possible cause of the color and i dont find any. 我检查了所有代码，搜索“黑色”，以找出颜色的可能原因，我没有找到任何。 Maybe it is default color. 也许它是默认颜色。 Cannot figure out the reason for this. 无法弄清楚这个的原因。

Thanks, Veera 谢谢，维拉

Answer 1

Try adding this css to your line: 尝试将此css添加到您的行：

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

I've had this happen to me in the past, if I remember correctly what is happening is that d3 thinks that the first point and the last point on the line are joined and therefore making it an area and filling it by default with the color black. 我过去曾经发生过这种情况，如果我没记错的话，d3会认为线上的第一个点和最后一个点是连接的，因此将它作为一个区域并默认用颜色填充它黑色。

If you set the fill to none and add a stroke it should fix this. 如果将填充设置为无并添加笔划，则应解决此问题。

Hope this helps. 希望这可以帮助。

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