应用错误收集

D3折线图未填充;什么不见了？

时间：2016-07-21 04:18:57

标签： d3.js

我正在尝试在csv中总结值并使用折线图填充它（当前团队强度跨月）。现在，我没有收到任何错误，＆amp;也没有填写图表。似乎无法找出遗漏的东西。

这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

    .line {
        stroke: blue;
        fill:none;
        stroke-width: 4;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-size: 10px;
        font-family: sans-serif;
    }

    .text-label {
        font-size: 10px;
        font-family: sans-serif;
    }
</style>
<body>

<!-- load the d3.js library -->    
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%m/%d/%Y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

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



d3.csv("Test.csv", function(error, data) {
    if (error) throw error;

// Not yet using filtering
    var filter = data.filter(function(d){
        return (d.Head == 'People' && d.Measure == 'Current Team')
    });


var nested = d3.nest()
    .key(function(d) {return d.Time_Period;})
    .rollup(function(d) {
        return {
            line1: d3.sum(d, function(e) { return e.Value; })
        };
        //console.log(line1);
    })
    .entries(data);

   console.log(nested);

  x.domain(d3.extent(nested, function(d) { return d.key; }));
  y.domain(d3.extent(nested, function(d) { return d.values.line1; }));

// Adds the svg canvas
    var svg = d3.select("body").append("svg");

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

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

    var line_1 = d3.svg.line()
            .x(function(d) { console.log(parseDate(d.key));return parseDate(d.key); })
            .y(function(d) { console.log(d.values.line1);return d.values.line1; });

            console.log(line_1.x.value);


   svg.append("path")
        .datum(nested)
        .attr("class", "line")
        .attr("d", line_1)
        .style("stroke", "steelblue")
        .attr("fill", "none")
        .attr("stroke-width", 4.8)
        .attr("stroke-opacity", 0.0001)
        .transition().duration(2000)
        .attr("stroke-opacity", 1)
        .attr("stroke-width", 2.8);     

  });



</script>

<Test.csv>
[
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "Current Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "Current Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "New Joinees", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "New Joinees", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "4/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "Current Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "Current Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "New Joinees", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "New Joinees", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "5/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "Current Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "Current Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "New Joinees", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "New Joinees", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "6/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "Current Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "Current Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Current Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "6", 
    "Measure": "New Joinees", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "5", 
    "Measure": "New Joinees", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "New Joinees", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "IN", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Reporting & Vizualization", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
},
{
    "RU": "US", 
    "Head": "People", 
    "Industry": "-", 
    "Practice": "Data Integration", 
    "Value": "0", 
    "Measure": "Planned Team", 
    "Time_Period": "7/1/2016", 
    "Unit": "Count"
}
]

1 个答案:

答案 0 :(得分：0)

我在您的代码中进行了以下更新，它似乎在代码段中正常工作。

SVG容器的位置和大小。
解析x轴日期值。

您问题中的值显示为一条直线。我使用了一些随机值来获得不同的外观。

var data = [{
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "Current Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "Current Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "New Joinees",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "75",
  "Measure": "New Joinees",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "18",
  "Measure": "Planned Team",
  "Time_Period": "4/1/2016",
  "Unit": "Cunt"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "15",
  "Measure": "Planned Team",
  "Time_Period": "4/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "Current Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "Current Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "New Joinees",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "New Joinees",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "5/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "Current Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "Current Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "New Joinees",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "New Joinees",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "6/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "Current Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "Current Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Current Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "6",
  "Measure": "New Joinees",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "5",
  "Measure": "New Joinees",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "New Joinees",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "10",
  "Measure": "Planned Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "IN",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "20",
  "Measure": "Planned Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Reporting & Vizualization",
  "Value": "30",
  "Measure": "Planned Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}, {
  "RU": "US",
  "Head": "People",
  "Industry": "-",
  "Practice": "Data Integration",
  "Value": "0",
  "Measure": "Planned Team",
  "Time_Period": "7/1/2016",
  "Unit": "Count"
}];


var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 600 - margin.left - margin.right,
  height = 270 - margin.top - margin.bottom;



// Parse the date / time
var parseDate = d3.time.format("%m/%d/%Y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
  .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
  .orient("left").ticks(5);


// Not yet using filtering

var filter = data.filter(function(d) {
  return (d.Head == 'People' && d.Measure == 'Current Team')
});


var nested = d3.nest().key(function(d) {
    return d.Time_Period;
  })
  .rollup(function(d) {
    return d3.sum(d, function(e) {
        return +e.Value;
      })
   
    //console.log(line1);
  })
  .entries(data);


x.domain(d3.extent(nested, function(d) {
  return parseDate(d.key);
}));

y.domain(d3.extent(nested, function(d) {
  return d.values;
}));


// Adds the svg canvas
var svg = d3.select("body").append("svg").attr("height", height + margin.top + margin.bottom)
  .attr("width", width + margin.left + margin.right)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Price ($)");

var line_1 = d3.svg.line()
  .x(function(d) {    
    return x(parseDate(d.key));
  })
  .y(function(d) {       
    return d.values;
  });

//console.log(line_1.x.value);


svg.append("path")
  .datum(nested)
  .attr("class", "line")
  .attr("d", line_1)
  .style("stroke", "steelblue")
  .attr("fill", "none")
  .attr("stroke-width", 4.8)
  .attr("stroke-opacity", 0.0001)
  .transition().duration(2000)
  .attr("stroke-opacity", 1)
  .attr("stroke-width", 2.8);

.line {
  stroke: blue;
  fill: none;
  stroke-width: 4;
}
.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
.axis text {
  font-size: 10px;
  font-family: sans-serif;
}
.text-label {
  font-size: 10px;
  font-family: sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>