CODEWITHSUNDEEP
d3.js
user2024080
user2024080

Reputation: 5101

d3js - the path is not drawing full values while using `defined`

I am getting data from back-end like this: (the data has 0 values. so I am preventing those values from draw lines.)

[{"ActualPercentage":5.5,"PlanPercentage":10,"Week":"\/Date(1438376400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":10.5,"PlanPercentage":15,"Week":"\/Date(1441054800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":15,"PlanPercentage":20,"Week":"\/Date(1443646800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":24.129,"PlanPercentage":30,"Week":"\/Date(1446325200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":27.3,"PlanPercentage":31,"Week":"\/Date(1448917200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":30.5,"PlanPercentage":33.014,"Week":"\/Date(1451595600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":33,"PlanPercentage":36.532,"Week":"\/Date(1454274000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":41.246,"Week":"\/Date(1456779600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":44.781,"Week":"\/Date(1459458000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":48.316,"Week":"\/Date(1462050000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":53.03,"Week":"\/Date(1464728400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":57.158,"Week":"\/Date(1467320400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":60.148,"Week":"\/Date(1469998800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":64.868,"Week":"\/Date(1472677200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":69.528,"Week":"\/Date(1475269200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":73.653,"Week":"\/Date(1477947600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":78.956,"Week":"\/Date(1480539600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":84.053,"Week":"\/Date(1483218000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":88.392,"Week":"\/Date(1485896400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":93.119,"Week":"\/Date(1488315600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":97.605,"Week":"\/Date(1490994000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":98,"Week":"\/Date(1493586000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
{"ActualPercentage":0,"PlanPercentage":100,"Week":"\/Date(1496264400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}]

to prevent the drawing unwanted values i am using defined like this:

var line = d3.svg.line()
                // .interpolate("basis")
                .defined(function(d) { return d.temperature })
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y(d.temperature); });

But i am not getting the path properly drawn. see here the picture:

enter image description here

Actually the green line has to draw up to the top. and the red line is correct here. what is wrong with my approach?

what is the correct way to draw the lines then?

Update if I comment this line the graph works fine:

 // path
                 //      .attr("stroke-dasharray", totalLength + " " + totalLength)
                 //      .attr("stroke-dashoffset", totalLength)
                 //      .transition()
                 //      .duration(2000)
                 //      .ease("linear")
                 //      .attr("stroke-dashoffset", 0);

Upvotes: 2

Views: 207

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Update the way you are calculating total length:

var totalLength = [path[0][0].getTotalLength()];

you should do 

var totalLength = d3.max(path[0], function(d1){return d1.getTotalLength()});

So that you can set the maximum length to the stroke-dashoffset

working code here

Upvotes: 2

Related Questions